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

在使用多tab内容页面时，动态组件是一个非常有用的工具。但是循环动态组件有个问题，就是不同的组件绑定不同的属性值和方法。将它们全部写在组件中固然是一种方法，但管理和查看不便，所以下面是单独声明的技巧。切换标签常量constTABS=[{label:'tab1',compo:'RankingList',props:['currentLiveCourse','teacherList','teacherIdObj','teacherNameObj','showCashbackRuleDialog','teacherLoading']},{label:'tab2',compo:'ExpertVideo',listeners:{playVideo:'playVideo'}}].sync等带有修饰符的方法需要单独赋值组件页代码。//tabs是被切换的tabcomputed计算属性获取值v-bind和v-on用于绑定多个属性而methods，这个地方必须要使用computedproperties来获取，否则获取不到异步数据。computed:{//动态组件绑定的属性值tabCompoProps(){return(arr)=>arr.reduce((acc,cur)=>{acc[cur]=this[cur]returnacc},{})},//动态组件绑定的事件tabCompoListeners(){return(listeners)=>{for(constlistenerinlisteners){listeners[listener]=this[listener]}returnlisteners}}}