自定义指令

简介

• 默认内置指令 v-model v-show
• 自定义 例如聚焦输入框

• 全局指令

  const app = Vue.createApp({})
  app.directive('focus',{
      mounted(el){
          el.focus()
      }
  })
  

• 局部指令 组件中接收一个directives选项

  directives:{
      focus:{
          mounted(el){
              el.focus()
          }
      }
  }
  

钩子函数

一个指令定义对象可以提供以下几个钩子函数（均为可选）

• created 在绑定元素的attribute 或 事件监听器被应用之前调用。
• beforeMount 当指令第一次绑定到元素并且在挂载父组件之前调用
• mounted 在绑定元素的父组件被挂载后调用
• beforeUpdate 在更新包含组件的VNode之前调用
• updated 在包含组件的VNode及其子组件的VNode更新后调用
• beforeUnmount 在卸载绑定元素的父组件之前调用
• unmounted 当指令与元素解除绑定且父组件已卸载时，只调用一次

函数简写

对象字面量

• 如果指令需要多个值，可以传入一个js对象字面量
• 指令函数可以接受所有合法的js表达式

在组件中使用

• 在组件中使用时，自定义指令总是会被应用到组件的根节点上
• 不会通过 v-bind = “$attrs” 被传入另一个元素