vue指令传参数,vue传参的几种方式
这篇文章主要介绍了某视频剪辑软件的自定义指令传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
自定义指令传参指令环境传参方式自定义指令动态参数
自定义指令传参
指令
在某视频剪辑软件官网中，常用指令有v型车和v-bind，但是，如果我们需要对数字正射影像图元素进行底层操作，就需要用到自定义指令。
今天主要讲到传参的2种方式。
环境
vue 2。3 .3节点网络包2.6.1
传参方式
在主页。射流研究…中定义一个指令。
Vue.directive(zoom ，{
bind: function (el，binding，vnode) {
console.log(绑定)
},
更新：函数(el) {
},
解除绑定：函数(el) {
}
})
使用自定义指令，在任意一个超文本标记语言元素中，使用指令。
差异垂直缩放：{a:1，b:2 }= {宽度：800，高度：1000}/div
方式一：v-zoom:{a:1,b:2}
对于{a:1，b:2}，在有约束力的属性中，以字符串的形式传递，故可以写[1,2]、正确等数据格式，但是最后拿到的都是字符串类型。方式二：v-zoom="{width: 800, height: 1000}"
等号后面的{宽度：800,高度：1000},可以在有约束力的的价值属性中获取的数据的类型没有变化，可以直接使用宽度。后面的数字，可以用当前组件的参数替换。参考https://cn.vuejs.org/v2/guide/custom-directive.html
自定义指令动态参数
1.通过自定义指令中的修饰符的键作为值，更改显示的颜色
动态指令参数
当参数是动态的时候。
主页。射流研究…
//当参数的值是动态的时候
Vue.directive(color2 ，{
绑定：函数(el，绑定){
埃尔。风格。颜色=装订。价值；
}
})
Vue.directive(color3 ，{
绑定：函数(el，绑定){
埃尔。风格。颜色=装订。arg
}
})
模板。某视频剪辑软件中
模板
div class=demo
！-价值-
p v-color 2=紫色用户 I class= El-icon-user-solid /I/p
p v-color 2= redUser I class= El-icon-user-solid /I/p
p v-color 2=绿色用户 I class= El-icon-user-solid /I/p
！- arg -
p v-color 3:[紫色用户]I class= El-icon-user-solid /I/p
p v-color 3:[redUser]I class= El-icon-user-solid /I/p
p v-color 3:[green user]I class= El-icon-user-solid /I/p
/div
/模板
脚本
导出默认值{
data() {
返回{
紫色用户："紫色",
redUser:"红色",
绿色用户："绿色"
}
},
已创建(){},
方法：{}
}
/脚本
style lange=scss 范围
p {
显示：内嵌-块；
字体大小：40px
}
/风格
参数是静态的，将key的值作为value,改变颜色
主页。射流研究…
Vue.directive(color ，{
绑定：函数(el，绑定){
const color=对象。钥匙(装订。修饰符)[0]；//将键的值作为值，改变颜色，对象。键获取键的值；
埃尔。风格。color=颜色；
}
})
模板。某视频剪辑软件中
模板
div class=demo
p v-颜色。purplei class= El-icon-user-solid /I/p
p v-颜色。热地class= El-icon-用户-固体/I/p
p v-颜色。greeni class= El-icon-user-solid /I/p
/div
/模板
脚本
导出默认值{
data() {
返回{}
},
已创建(){},
方法：{}
}
/脚本
style lange=scss 范围
p {
显示：内嵌-块；
字体大小：40px
}
/风格
以上的方法，最终实现效果是一样的。
好了，这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。