![Vue.js从入门到项目实践(超值版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/987/44509987/b_44509987.jpg)
上QQ阅读APP看书,第一时间看更新
3.3.2 params
![](https://epubservercos.yuewen.com/CC45E5/23721548909464406/epubprivate/OEBPS/Images/Figure-P57_6319.jpg?sign=1739270057-oqUnowfIQfN1g6zd1BRbNvt1S2fHhSmy-0-605fc1c9ecd135d076d38eb2b354ad51)
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访问它。