自定义指令

如何自定义指令

1. 注册全局的自定义指令

   通过调用应用实例的directive方法可以注册全局的自定义指令, 所有组件都可以使用。

   <div id = "Application">
       <input v-getfocus />
   </div>
   <script>
   const App = Vue.createApp({})
   App.directive('getfocus', {
       mounted(el) {
           console.log('组件获得了焦点')
           el.focus()
       }
   })
   App.mount("#Application")
   </script>
   

2. 局部注册

   定义组件时, 在组件内部进行directives配置来自定义指令。

   const sub = {
   	directives: {
   		getfocus: {
   			......
   		}
   	}
   }
   

自定义指令的参数

自定义指令的参数会通过一个param对象传递, 参数的值可以为一个对象

<div id = "Application">
    <input v-getfocus:custom = "1" />
</div>
<script>
const App = Vue.createApp({})
App.directive('getfocus', {
    mounted(el, param) {
        if (param.value == '1') 
	        el.focus()
        // 将打印参数:custom
        console.log("参数:" + param.arg)
    }
})
App.mount("#Application")
</script>