1. 使用<script setup>

<template>
  <input v-focus="11111" />
  <input v-obj="{ id: 1, name: '这里是name' }" />
</template>
<script setup>
//定义一个变量vFocus
//命名方法使得DOM元素中可以用v-focus来显示
let vFocus = {
  //此处传入的el就是控件本身
  //第一个值为控件即event
  //第二个值为自定义指令的值
  //在此组件及所有子组件挂载完成后执行
  mounted: (el, value) => {
    console.log("当前控件为:", el);
    console.log("第二个参数value的值:", value);
    console.log("自定义指令的值:", value.value);
    el.focus();
  },
};
let vObj={
  mounted: (el, value) => {
    console.log("当前控件为:", el);
    console.log("第二个参数value的值:", value);
    console.log("自定义指令的id值:", value.value.id);
    el.focus();
  },
}
</script>
<style scoped>
</style>

2. 不使用<script setup>

<template>
  <input v-focus="11111" />
</template>
<script>
export default {
  setup() {},
  directives: {
    //定义一个变量vFocus
    //命名方法使得DOM元素中可以用v-focus来显示
    focus: {
      //此处传入的el就是控件本身
      //第一个值为控件即event
      //第二个值为自定义指令的值
      //在此组件及所有子组件挂载完成后执行
      mounted(el, value) {
        console.log("当前控件为:", el);
        console.log("第二个参数value的值:", value);
        console.log("自定义指令的值:", value.value);
        el.focus();
      },
    },
  },
};
</script>
<style scoped>
</style>

3. 全局注册

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'


createApp(App)
    .directive('focus', {
        //此处传入的el就是控件本身
        //第一个值为控件即event
        //第二个值为自定义指令的值
        //在此组件及所有子组件挂载完成后执行
        mounted(el, value) {
            console.log("当前控件为:", el);
            console.log("第二个参数value的值:", value);
            console.log("自定义指令的值:", value.value);
            el.focus();
        },
    })
    .mount('#app')

4. 指令钩子

el：指令绑定到的元素。这可以用于直接操作 DOM
binding：一个对象，包含以下属性。
value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
instance：使用该指令的组件实例。
dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。

prevNode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

<template>
  <input v-focus="11111" />
</template>
<script setup>
let vFocus = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {},
};
</script>
<style scoped>
</style>

4. 组件使用自定义指令(不推荐)

<MyComponent v-demo="test" />

<!-- MyComponent 的模板 -->
<div> <!-- v-demo 指令会被应用在此处 -->
  <span>My component content</span>
</div>