vue使用指令directive方式开发插件vue

使用指令directive方式开发插件

最简单的方式

1. 新建test.js文件

   // vue规定插件必须暴露一个install
   // 第一个参数:Vue 构造器
   // 第二个参数:可选选项对象
   function install(Vue){
       Vue.directive('test',{
           inserted(){
               console.log('test');   // inserted钩子函数：被绑定元素插入父节点时调用
           }
       })
   }
   export default install
   

2. main.js中注册插件

   import test from './test'
   Vue.use(test)
   

3. App.vue中使用指令插件

   <div id="app">
       <div v-test></div>
   </div>
   

4. 结果

绑定一个值看看

1. test.js

   function install(Vue){
       Vue.directive('test',{
           inserted(el,binding){
               console.log(binding.value); 
           }
       })
   }
   export default install
   

2. main.js不变

3. App.vue

   <template>
     <div id="app">
       <div v-test="name"></div>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App',
     data(){
       return{
         name:'zs'
       }
     }
   }
   </script>
   

4. 结果