自定义指令-vue3

局部指令

这里的是简单实现了一下输入框获取焦点的自定义指令

这里的v-focus，focus是我们自己定义的，前缀是v-，简单来说就是v- + 自定义的名称。

这里的局部指令是仅限于当前组件中，我们需要在那个地方获取焦点，就将v-focus添加到那个标签里面。

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

<script>
  import { ref, onMounted } from 'vue'
  
  export default {
    /*
     * 局部指令
    */
    directives: {
      focus: {
        mounted(el, bindings, vnode, preVnode) {
          console.log("focus mounted")
          el.focus()
        },
      }
    }
  }
</script>

全局指令

import { createApp } from 'vue'
import App from './04_teleport的内置组件/App.vue'

const app = createApp(App)

// 注意，这里是不需要加s的
app.directive('focus', {
	mouted(el, bindings, vnode, preVnode) {
		console.log('focus mounted')
		el.focus()
	}
})

app.mount('#app')

• 在main.js里面配置好全局指令后，我们可以可以在任意指令中直接调用v-focus，和局部指令用法一样，只是作用域不同。

mounted的四个参数

• el：是获取到的指令所添加到的整个标签， 以上面的为例就是获取到<input type="text">

• bindings:

  

如图所示，我们在v-focus将进行改变，变成v-focus.aaa.bbb="北辰"

此时，所展示的图片中modifiers数组中的aaa，bbb的值变为true，value的值也变为”北辰”。我们在需要传值的时候就可以写。用语言不太好描述，所以用了图片来解释，更加的形象直观一点。

• vnode: 返回当前自定义指令所在的虚拟节点的各种基本信息。
• preVnode: 返回前一个vnode的各种基本信息。