Vue.js从入门到项目实践(超值版)
上QQ阅读APP看书,第一时间看更新

3.3.2 params

params:自定义对象中可以接收一个params数组,指定一个特性列表,Vue.js编译器将自动提取自定义指令绑定元素上的这些特性。

代码如下:

    <div v-example a="hi"></div>
    Vue.directive('example', {
       params: ['a'],
       bind: function(){
         console.log(this.params.a)
       }
    })

此项API也支持动态属性,this.params[key]会自动保持更新。另外,可以指定一个回调,在值变化时调用,代码如下:

    <div v-example v-bind:a="Vue"></div>
    Vue.directive('example', {
       params: ['a'],
       paramWatchers: {
         a: function(val,oldVal){
           console.log('a changed!')
         }
       }
    })

提示:类似于props,指令参数的名称在JavaScript中使用camelCase风格,在HTML中对应使用kebab-case风格。假设在模板中有一个参数disable-effect,在JavaScript中以disableEffect访问它。