自定义指令

自定义指令

自定义指令分为两种：

• 自定义局部指令：组件通过directives选项们只能在当前组件中使用
• 自定义全局指令：app的directive方法，可以在任意组件中使用

案例：当input元素挂载完成之后可以自动获取焦点

实现方式一：使用默认的实现方式

<template>
    <div>
        <input type="text" ref="input">
    </div>
</template>

<script>
import {ref,onMounted} from "vue"
    export default {
        setup(){
            const input=ref(null)
            onMounted(()=>{
                input.value.focus()
            })
            return {
                input
            }
        }
    }
</script>

页面加载之后自动获取焦点

实现方式二：自定义一个v-focus的局部指令

<template>
    <div>
        <input type="text" v-focus>
    </div>
</template>

<script>
    export default {
        directives:{
            focus:{
                // 当这个挂载完成之后执行mounted，接收四个参数
                mounted(el,bindings,vnode,preVnode) {
                    console.log(el)
                    console.log(bindings)
                    console.log(vnode)
                    console.log(preVnode)
                },
            }
        },
    }
</script>

 

 

 所以拿到el之后直接el.focus即可自动获取焦点

 mounted(el,bindings,vnode,preVnode) {
                    el.focus()
                },

指令是可以添加修饰符还有参数的，这些部分可以在第二次参数中binding中可以看到

<template>
    <div>
        <input type="text" v-focus.abc="'xyz'">
    </div>
</template>

<script>
    export default {
        directives:{
            focus:{
                // 当这个挂载完成之后执行mounted，接收四个参数
                mounted(el,bindings,vnode,preVnode) {
                    console.log(bindings)
                },
            }
        },
    }
</script>

  console.log(bindings.value)
                    console.log(bindings.modifiers)

实现方式三：自定义一个v-focus的全局指令

import { createApp } from 'vue'
import App from './2/App.vue'
const app=createApp(App)
// 传入两个参数，第一个是指定的名称，第二个是一个对象
app.directive('focus',{
    mounted(el,bindings,vnode,preVnode) {
        el.focus()
    },
})
app.mount('#app')

指令的生命周期

一个指令定义的对象，Vue提供了一下几个钩子：

created：在绑定元素的attribute或事件监听器被应用之前调用；

beforeMount：当指令第一次绑定到元素并挂载父组件之前调用；

mounted：在绑定元素的父组件被挂载后调用；

beforeUpdate：在更新包含组件的VNode之前调用；

updated：在包含组件的VNode及其子组件的VNode更新后调用；

beforeUnmount：在卸载绑定元素的父组件之前调用；

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

<template>
  <div>
    <h2 >当前计数：{{ counter }}</h2>
    <button v-if="counter<2" v-my @click="add">+</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  directives: {
    my: {
      created() {
        console.log("created");
      },
      beforeMount() {
        console.log("beforeMount");
      },
      mounted() {
        console.log("mounted");
      },
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      updated() {
        console.log("updated");
      },
      beforeUnmount() {
        console.log("beforeUnmount");
      },
      unmounted() {
        console.log("unmounted");
      },
    },
  },
  setup() {
    const counter = ref(0);
    const add = () => counter.value++;
    return {
      counter,
      add,
    };
  },
};
</script>

 点击加一之后

 

 

 再次点击之后