vue自定义指令

转自：https://www.cnblogs.com/ylHeyden/p/7544373.html

Vue的官方自定义directive，基本调用简洁如下:

 

Vue.directive('my-directive', {
  bind: function () {},// 指令与被绑定元素第一次绑定时触发，通常做一些事件监听的初始化
  inserted: function () {},// 绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  update: function () {},// 被绑定元素内容发生变化时触发，可接受参数，在这里也可以进行事件监听的初始化
  componentUpdated: function () {},// 被绑定元素所在模板完成一次更新周期时调用。
  unbind: function () {}// 指令与元素解绑时触发，比如通过路由转跳页面时需要解绑指令
})

 

　　在某些组件中，类似于elment-ui中的checkbox多选按钮，里面的给出的api并没有click事件，只能通过change事件（也就是选中和未选中切换时触发）来进行一些操作，这里如果有一个必须点击触发的需求的话，那就可以用自定义指令重新赋予点击事件初步解决，当然这里主要是看它如何回调反作用于当前Vnode（当前页面）；

 

<el-checkbox  v-banSlect="{fn:checkSlect}">test</el-checkbox>


 directives:{//这里面没有定义this对象
            banSlect:{
                bind(el,bind,vnode){

                   
                },
                update(el,bind){
                    fn.call(null,mval,val,code,item,oldval);//这里就是运行fn
　
　　　　　　　　　　　　//只要dom刷新，update就会触发，即使值没有改变
                },
                unbind(){
                   
                }
            }
        },
methods: {
    checkSlect(){alert（“已回调”）
                 console.log(this)//这里就是改组件的VueComponent对象
                }
            },
}，

 

　　通过上面的方法就可以使自定义的方法和整个组件关联了，想调用组件里面的方法，就只能通过对象字面量吧函数方法传给bind里面，然后在相应状态（这里是update）调用该方法，这里面有点奇怪的是checkSlect里面的this是有值的，update里是没this定义的，直接运行的checkSlect或者用上文的call，理论上是this是指向Windows(非严格模式),但这里this指向的是VueComponent对象，从效果上来说就是我们想要的效果，至于原因，我后面再跟进。

　　总而言之，通过对象字面量传递函数方法或者属性变量来关联自定义的指令和组件。

转自：https://www.cnblogs.com/ylHeyden/p/7544373.html

 

欢迎关注我的个人技术公众号！javascript艺术