打赏

vue 自定义指令 

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue 自定义指令</title>
    </head>

    <body>
        <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
        <script type="text/javascript">
            Vue.directive('demo', {
                bind: function(el, binding, vnode) {
                    var s = JSON.stringify
                    el.innerHTML =
                        'name: ' + s(binding.name) + '<br>' +
                        'value: ' + s(binding.value) + '<br>' +
                        'expression: ' + s(binding.expression) + '<br>' +
                        'argument: ' + s(binding.arg) + '<br>' +
                        'modifiers: ' + s(binding.modifiers) + '<br>' +
                        'vnode keys: ' + Object.keys(vnode).join(', ')
                }
            })
            new Vue({
                el: '#hook-arguments-example',
                data: {
                    message: 'hello!'
                }
            })
        </script>
    </body>

</html>

输出：

 

说明：

https://cn.vuejs.org/v2/guide/custom-directive.html#ad

 

更新：2019.3.22

有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

 

更新：2020-04-09

实现一个单向数据里的指令（父传子通信）：

（1）指令

 

// 注册一个全局自定义指令 `v-prop`
Vue.directive('prop', {
  // 只调用一次，指令第一次绑定到元素时调用。
  bind(el,binding,vnode){
    // 指令参数
    const dataName = binding.arg;
    vnode.componentInstance[dataName]=binding.value;
  },
  // update钩子函数
  update(el,binding,vnode){
    log(el,binding,vnode,'el,binding,vnode')
    // 指令参数
    const dataName = binding.arg;

    // 说明父组件的绑定值发生了更新
    // 父组件data中仅传入的值发生改变时，才更新子组件内容
    // 父组件data中其他值的改变，不会重新渲染子组件
    if (binding.value != binding.oldValue) {
      vnode.componentInstance[dataName]=binding.value;
    }
  },
})

 

（2）使用

HelloWorld是子组件，指令是“v-prop:msg”，将父组件data中的msg传递给组组件。
<HelloWorld v-prop:msg="'list-' + msg"/>
<hr>
<HelloWorld v-prop:msg="msg"/>

 

posted @ 2018-05-15 18:31  孟繁贵  阅读(207)  评论(0)  编辑  收藏  举报
TOP