Vue3에서 지침을 사용자 정의하는 방법은 무엇입니까? 코드 설명

Vue3에서 지침을 사용자 정의하는 방법은 무엇입니까? 다음 기사에서는 Vue3에서 지침을 사용자 정의하는 방법을 설명합니다. 도움이 되기를 바랍니다.

TienChin 프로젝트의 프런트엔드는 Vue3입니다. 프런트엔드에는 다음과 같은 요구 사항이 있습니다. 사용자에게 해당 권한이 있는 경우 프런트엔드 페이지의 일부 버튼이 표시되어야 합니다. 그러면 해당 버튼이 표시됩니다. 사용자에게 해당 권한이 없으면 버튼이 숨겨집니다. 이는 기본적으로 요구 사항입니다.

이 요구를 보고 일부 친구는 먼저 v-if 명령을 사용할 수 있다고 생각할 수도 있습니다. 그러나 사용자는 일반적으로 여러 권한을 가질 수 있고 심지어 와일드카드도 가질 수 있으므로 이 비교는 쉽지 않습니다. 작업을 수행하고 메서드를 작성해야 합니다. . . 따라서 하나의 명령을 사용하여 이 기능을 구현할 수 있다면 훨씬 더 전문적으로 보일 것입니다.

그냥 해보세요. Vue3에서 명령어를 맞춤설정하는 방법을 살펴보겠습니다. (학습 동영상 공유: vue 동영상 튜토리얼)

1. 결과 표시

먼저 맞춤 지침의 최종 사용법을 살펴보겠습니다.

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

친구들은 이 v-hasPermission을 참조하세요. >는 사용자 정의 명령입니다. 현재 사용자에게 user:delete 권한이 있으면 이 버튼이 표시됩니다. v-hasPermission 就是我们的自定义指令，如果当前用户具备 user:delete 权限，这个按钮就会展示出来，如果当前用户不具备这个权限，这个按钮就不会展示出来。

2. 指令基础

先要和小伙伴们说一下，Vue2 和 Vue3 在自定义指令上有一些差异，并不完全一致，下面的介绍主要是针对 Vue3 的介绍。

我先来和小伙伴们分享一下我们具体是怎么做的，然后在讲解代码的时候再来和大家说说各个参数的含义。

2.1 两种作用域

自定义指令可以定义全局的，也可以定义局部的。

在正式开搞之前，小伙伴们需要先明白，自定义指令有两种作用域，一种是局部的自定义指令，还有一种是全局的自定义指令。局部的自定义指令就只能在当前 .vue 文件中使用，全局的则可以在所有的 .vue 文件中使用。

2.1.1 局部指令

直接在当前 .vue 文件中定义即可，如下：

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

不过，在 Vue3 中，也可以这样写：

<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>

这里我自定义了一个名叫 onceClick 的指令，给一个 button 按钮加上这个指令之后，可以设置这个 button 按钮在点击多久之后，处于禁用状态，防止用户重复点击。

小伙伴们看，这个指令的执行逻辑其实很简单，el 相当于添加了这个指令的元素，监听该元素的点击事件，如果点击该元素时，该元素不是处于禁用状态，那么就设置该元素为禁用，给一个定时任务，到期后使该元素变为可用。这里边具体的参数，松哥下面会跟大家详细介绍。

不过这只是一个局部指令，只能在当前 .vue 文件中使用，我们也可以定义全局指令，这样就可以在所有的 .vue 文件中使用了。

2.1.2 全局指令

全局指令我们一般写在 main.js 中，或者写一个单独的 js 文件然后在 main.js 中引入，下面的例子是直接写在 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);
            }
        });
    }
})

这样，我们就可以随时随地去使用 v-onceClick

2. 명령 기본

먼저 Vue2와 Vue3은 사용자 정의 명령에 약간의 차이가 있고 완전히 일관성이 없다는 점을 친구들에게 알려주고 싶습니다.

먼저 어떻게 했는지 친구들과 공유하고, 코드를 설명할 때 각 매개변수의 의미에 대해 이야기해보겠습니다.

2.1 두 가지 유형의 범위
• 사용자 정의 명령어는 전역 또는 로컬 범위를 정의할 수 있습니다.
• 공식 출시에 앞서 친구는 맞춤 지침에 두 가지 범위가 있다는 점을 이해해야 합니다. 하나는 로컬 맞춤 명령어이고 다른 하나는 글로벌 맞춤 명령어입니다. 로컬 사용자 정의 지시문은 현재 .vue 파일에서만 사용할 수 있는 반면 전역 사용자 지정 지시문은 모든 .vue 파일에서 사용할 수 있습니다.
  2.1.1 로컬 지시문
• 다음과 같이 현재 .vue 파일에서 직접 정의할 수 있습니다.

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);
            }
        });
    }
})

그러나 Vue3에서는 다음과 같이 작성할 수도 있습니다.

<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>

여기에서 사용자 정의합니다. OnceClick이라는 명령이 추가되었습니다. 이 명령을 버튼 버튼에 추가한 후 버튼 버튼을 클릭한 후 얼마나 오랜 시간이 걸릴지 설정할 수 있으며, 사용자가 반복적으로 클릭하는 것을 방지하기 위해 비활성화 상태가 됩니다.

친구 여러분, 이 명령의 실행 논리는 실제로 매우 간단합니다. el은 이 명령으로 요소를 추가하고 요소를 클릭할 때 요소의 클릭 이벤트를 모니터링하는 것과 동일합니다. 요소가 비활성화된 경우 만료 후에 해당 요소를 사용할 수 있도록 예약된 작업이 제공됩니다. 송 형제는 아래에서 구체적인 매개 변수를 자세히 소개합니다.

그러나 이는 현재 .vue 파일에서만 사용할 수 있는 로컬 지시문일 뿐입니다. 모든 .vue 파일에서 사용할 수 있도록 전역 지시문을 정의할 수도 있습니다.

2.1.2 전역 지시문🎜

🎜전역 지시문은 보통 main.js로 작성하거나, 별도의 js 파일을 작성한 후 main.js에 도입합니다. 다음 예는 main.js에 직접 작성합니다. .js에서는: 🎜

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);
        }
    }
})

🎜이러한 방식으로 언제 어디서나 v-onceClick 명령을 사용할 수 있습니다. 🎜🎜지침을 사용자 정의할 때 여기에서 마운트된 매개변수와 매개변수에 대해 혼란스러울 수 있습니다. 그러면 송 형제가 이러한 방법과 매개변수를 자세히 소개할 것입니다. 🎜🎜🎜2.2 일곱 가지 후크 기능🎜🎜🎜Vue3에서 사용자 정의 명령어의 후크 기능에는 주로 다음과 같은 일곱 가지 유형이 포함됩니다(Vue2와는 상당히 다릅니다). 🎜🎜🎜created: 바인딩된 요소의 속성 또는 이벤트 리스너에서 함수가 적용되기 전에 호출됩니다. 이는 일반 v-on 이벤트 리스너가 호출되기 전에 이벤트 리스너에 지시문을 추가해야 할 때 유용합니다. 🎜🎜beforeMount: 지시문이 요소에 처음 바인딩될 때와 상위 구성 요소가 마운트되기 전에 호출됩니다. 🎜🎜마운트됨: 바인딩된 요소의 상위 구성 요소가 마운트된 후 호출됩니다. 🎜대부분의 사용자 지정 지침이 여기에 기록됩니다🎜. 🎜🎜beforeUpdate: 구성 요소가 포함된 VNode를 업데이트하기 전에 호출됩니다. 🎜🎜updated: 포함하는 구성 요소의 VNode와 해당 하위 구성 요소의 VNode가 업데이트된 후에 호출됩니다. 🎜🎜beforeUnmount: 바인딩된 요소의 상위 구성 요소를 마운트 해제하기 전에 호출됩니다. 🎜🎜unmounted: 지시어가 요소에서 바인딩 해제되고 상위 구성 요소가 마운트 해제된 경우 한 번만 호출됩니다. 🎜🎜🎜Hook 함수가 많아 다소 어렵게 느껴질 수도 있지만, 실제로 우리 일상 개발에서 가장 많이 사용되는 함수는 탑재된 함수입니다. 🎜

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前端开发、编程基础视频）

위 내용은 Vue3에서 지침을 사용자 정의하는 방법은 무엇입니까? 코드 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!