Bagaimana untuk menyesuaikan arahan dalam Vue3? Penjelasan kod

Bagaimana untuk menyesuaikan arahan dalam Vue3? Artikel berikut akan mengajar anda cara menyesuaikan arahan dalam Vue3 saya harap ia akan membantu anda!

Halaman hadapan projek TienChin ialah Vue3 Bahagian hadapan mempunyai keperluan sedemikian: beberapa butang pada halaman hujung hadapan mesti dipaparkan berdasarkan pengguna. keizinan. Jika pengguna mempunyai kebenaran yang sesuai Jika pengguna mempunyai kebenaran yang sepadan, butang yang sepadan akan dipaparkan jika pengguna tidak mempunyai kebenaran yang sepadan, butang akan disembunyikan. Ini pada asasnya adalah keperluan.

Melihat permintaan ini, sesetengah rakan mungkin mula-mula terfikir untuk menggunakan perintah v-if ini sememangnya boleh dilakukan, kerana pengguna mungkin mempunyai banyak kebenaran, malah mungkin terdapat kad bebas perbandingan bukanlah satu tugas yang mudah, dan kaedah mesti ditulis. . . Oleh itu, jika anda boleh menggunakan satu arahan untuk melaksanakan fungsi ini, ia akan kelihatan lebih profesional.

Lakukan sahaja, mari lihat cara untuk menyesuaikan arahan dalam Vue3. (Belajar perkongsian video: tutorial video vue)

1. Paparan hasil

Mari kita lihat penggunaan terakhir arahan tersuai :

<button @click="btnClick" v-hasPermission="[&#39;user:delete&#39;]">删除用户</button>

Seperti yang anda lihat, ini v-hasPermission adalah arahan tersuai kami Jika pengguna semasa mempunyai kebenaran user:delete, butang ini akan dipaparkan Jika pengguna semasa tidak mempunyai kebenaran ini. , butang tidak akan dipaparkan.

2. Asas perintah

Mula-mula izinkan saya memberitahu rakan saya bahawa terdapat beberapa perbezaan dalam perintah tersuai antara Vue2 dan Vue3, yang tidak sepenuhnya konsisten pengenalan adalah terutamanya untuk pengenalan Vue3.

Saya mula-mula akan berkongsi dengan rakan saya bagaimana kami melakukannya, dan kemudian saya akan bercakap dengan anda tentang maksud setiap parameter semasa menerangkan kod.

2.1 Dua skop

Arahan tersuai boleh mentakrifkan skop global atau tempatan.

Sebelum pelancaran rasmi, rakan perlu memahami bahawa arahan tersuai mempunyai dua skop, satu arahan tersuai tempatan dan satu lagi arahan tersuai global. Arahan tersuai tempatan hanya boleh digunakan dalam fail .vue semasa, manakala arahan global boleh digunakan dalam semua fail .vue.

2.1.1 Arahan setempat

boleh ditakrifkan terus dalam fail .vue semasa, seperti berikut:

directives: {
  focus: {
    // 指令的定义
    mounted(el) {
      el.focus()
    }
  }
}

Walau bagaimanapun, dalam Vue3 , anda juga boleh menulis seperti ini:

<template>
    <p>
        <button v-onceClick="10000" @click="btnClick">ClickMe</button>
    </p>
</template>

<script>

    import {ref} from 'vue';

    export default {
        name: "MyVue01",
        setup() {
            const a = ref(1);
            const btnClick = () => {
                a.value++;
            }
            return {a, btnClick}
        },
        directives: {
            onceClick: {
                mounted(el, binding, vnode) {
                    el.addEventListener('click', () => {
                        if (!el.disabled) {
                            el.disabled = true;
                            setTimeout(() => {
                                el.disabled = false;
                            }, binding.value || 1000);
                        }
                    });
                }
            }
        }
    }
</script>

Di sini saya menyesuaikan arahan yang dipanggil onceClick Selepas menambahkan arahan ini pada butang butang, anda boleh menetapkan berapa lama selepas butang itu diklik, ia akan berada dalam a disabled state , untuk menghalang pengguna daripada mengklik berulang kali.

Rakan-rakan, anda lihat, logik pelaksanaan perintah ini sebenarnya sangat mudah el adalah bersamaan dengan menambah elemen dengan arahan ini, memantau acara klik elemen tersebut tidak dalam keadaan dilumpuhkan Kemudian tetapkan elemen kepada dilumpuhkan, berikan tugas berjadual dan sediakan elemen itu selepas tamat tempoh. Brother Song akan memperkenalkan parameter khusus di sini secara terperinci di bawah.

Walau bagaimanapun, ini hanya arahan tempatan dan hanya boleh digunakan dalam fail .vue semasa Kami juga boleh menentukan arahan global supaya ia boleh digunakan dalam semua fail .vue.

2.1.2 Arahan global

Arahan global biasanya ditulis dalam main.js, atau kami menulis fail js yang berasingan dan memperkenalkannya dalam main.js, seperti berikut Contoh ditulis terus dalam main.js:

const app = createApp(App);

app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                setTimeout(() => {
                    el.disabled = false;
                }, binding.value || 1000);
            }
        });
    }
})

Dengan cara ini, kita boleh menggunakan perintah v-onceClick pada bila-bila masa dan di mana-mana sahaja.

Anda mungkin keliru tentang pemasangan dan parameter di sini apabila menyesuaikan arahan Kemudian Brother Song akan memperkenalkan kaedah dan parameter ini kepada anda secara terperinci.

2.2 Tujuh fungsi cangkuk

Dalam Vue3, terdapat terutamanya tujuh jenis fungsi cangkuk untuk arahan tersuai (ini agak berbeza daripada Vue2):

• dibuat: Dipanggil sebelum atribut atau pendengar peristiwa unsur terikat digunakan. Ini berguna apabila arahan perlu dilampirkan pada pendengar acara sebelum pendengar acara v-on biasa dipanggil.
• beforeMount: Dipanggil apabila arahan terikat pada elemen untuk kali pertama dan sebelum komponen induk dipasang.
• dilekapkan: Dipanggil selepas komponen induk elemen terikat dipasang Kebanyakan arahan tersuai ditulis di sini.
• beforeUpdate: Dipanggil sebelum mengemas kini VNode yang mengandungi komponen.
• dikemas kini: Dipanggil selepas VNod komponen yang mengandungi dan VNod subkomponennya dikemas kini.
• sebelum Nyahlekap: Dipanggil sebelum menyahlekap komponen induk unsur terikat
• dipanggil hanya sekali apabila arahan dinyahlekap daripada elemen dan komponen induk telah dinyahlekap.

Walaupun terdapat banyak fungsi cangkuk, yang mungkin kelihatan agak menakutkan, fungsi yang paling biasa digunakan dalam pembangunan harian kita sebenarnya adalah fungsi yang dipasang.

2.3 四个参数

这里七个钩子函数，钩子函数中有回调参数，回调参数有四个，含义基本上和 Vue2 一致：

• el：指令所绑定的元素，可以用来直接操作 DOM，我们松哥说想实现一个可以自动判断组件显示还是隐藏的指令，那么就可以通过 el 对象来操作 DOM 节点，进而实现组件的隐藏。

• binding：我们通过自定义指令传递的各种参数，主要存在于这个对象中，该对象属性较多，如下属性是我们日常开发使用较多的几个：

  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-hasPermission="['user:delete']" 中，绑定值为 'user:delete'，不过需要小伙伴们注意的是，这个绑定值可以是数组也可以是普通对象，关键是看你具体绑定的是什么，在 2.1 小节的案例中，我们的 value 就是一个数字。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-hasPermission:[name]="'zhangsan'" 中，参数为 "name"。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

2.4 动态参数

有一种动态参数，这里也和小伙伴们分享下。正常情况下，我们自定义指令时传递的参数都是通过 binding.value 来获取到的，不过在这之外还有一种方式就是通过 binding.arg 获取参数。

我举一个简单例子，假设我们上面这个 onceClick 指令，默认的时间单位时毫秒，假设现在想给时间设置单位，那么我们就可以这样写：

const app = createApp(App);

app.directive('onceClick',{
    mounted(el, binding, vnode) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true;
                let time = binding.value;
                if (binding.arg == "s") {
                    time = time * 1000;
                }
                setTimeout(() => {
                    el.disabled = false;
                }, time);
            }
        });
    }
})

在自定义指令的时候，获取到 binding.arg 的值，这样就可以知道时间单位了，在使用该指令的时候，方式如下：

<button v-onceClick:[timeUnit]="10" @click="btnClick">ClickMe</button>
<script>

    import {ref} from 'vue';

    export default {
        name: "MyVue01",
        setup() {
            const timeUnit = ref('s');
            return {timeUnit}
        }
    }
</script>

timeUnit 是一个提前定义好的变量。

3. 自定义权限指令

好啦，有了上面的基础知识，接下来就来看我们本文的主题，自定义权限指令，我写一个简单的例子大家来看下：

const usersPermissions = ['user'];

app.directive('hasPermission', {
    mounted(el, binding, vnode) {
        const {value} = binding;
        let f = usersPermissions.some(p => {
            return p.indexOf(value) !== -1;
        });
        if (!f) {
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})

usersPermissions 表示当前用户所具备的权限，正常该数据应该是从服务端加载而来，但是我这里简单起见，就直接定义好了。

具体的逻辑很简单，先从 binding 中提取出 value 的值，这就是当前控件所需要的权限，然后遍历 usersPermissions 用一个 some 函数，去查看 usersPermissions 中是否有满足条件的值，如果没有，说明当前用户不具备展示该组件所需要的权限，那么就要隐藏这个组件，隐藏的方式就是获取到当前组件的父组件，然后从父组件中移除当前组件即可。

这是一个全局的指令，定义好之后，我们就可以在组件中直接使用了：

<button @click="btnClick" v-hasPermission="[&#39;user:delete&#39;]">删除用户</button>

好啦，Vue3 自定义组件学会了没？松哥在最近的 TienChin 项目视频中也会和大家分享这块的内容，敬请期待。

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan arahan dalam Vue3? Penjelasan kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!