vue动态组件绑定动态属性和方法的小tips
【vue动态组件绑定动态属性和方法的小tips】当使用多 tab 内容页时，动态组件是一件非常好用的利器。但是循环动态组件会有个问题，那就是不同组件绑定不同的属性值和方法，全部写在组件内固然是一种方法，就是不方便管理和查看，所以以下是单独声明的技巧小 tips。
切换的tabs常量
const TABS = [
{
label: 'tab1',
compo: 'RankingList',
props: [
'currentLiveCourse',
'teacherList',
'teacherIdObj',
'teacherNameObj',
'showCashbackRuleDialog',
'teacherLoading'
]
},
{
label: 'tab2',
compo: 'ExpertVideo',
listeners: {
playVideo: 'playVideo'
}
}
]component页面代码 对于
.sync等修饰符的方法需要单独赋值。// tabs 是切换的tab
computed计算属性获取值
v-bind和v-on用来绑定多个属性和方法，这个地方得用计算属性来获取，否则对于异步数据获取不到。computed: {
// 动态组件绑定的属性值
tabCompoProps () {
return (arr) => arr.reduce((acc, cur) => {
acc[cur] = this[cur]
return acc
}, {})
},
// 动态组件绑定的事件
tabCompoListeners () {
return (listeners) => {
for (const listener in listeners) {
listeners[listener] = this[listener]
}
return listeners
}
}
}推荐阅读
- Go|Go 语言入门 3-动态数组(slice)的特性及实现原理
- Vue|绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）
- Vue|数据代理-Object.defineProperty -Vue中的数据代理
- Vue|事件处理、事件修饰符（详细）
- vue|vue-vue3(4)-计算属性与监视computed，watch，watchEffect
- vue|前端之vue计算属性与监视属性
- Vue|Vue（计算属性与监视属性）
- 前端框架Vue|前端框架Vue----监视属性
- Vue，Django前后端分离，开发Openstack（五）Django，Vue前后端交互方法
- #|vu2 尚硅谷 组件化编程