vue动态组件绑定动态属性和方法的小tips vue动态组件绑定动态属性和方

【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 } } }