異なるコンポーネントへのループとバンプの貼り付け

Question

私は3つの異なる子コンポーネントを持っています。それらはすべて同じ小道具とカスタムイベントリスナーを必要とします。

Vue.component('parent',{ 
    template: 
     `<div> 
      <component1 :prop1="prop1" :prop2="prop2" v-on:some-event="someEventHandler" /> 
      <component2 :prop1="prop1" :prop2="prop2" v-on:some-event="someEventHandler" /> 
      <component3 :prop1="prop1" :prop2="prop2" v-on:some-event="someEventHandler" /> 
     </div>` 
}) 


var testMixin = { 
    props:['prop1','prop2'], 
    template: `<div>{{prop1}}</div>` 
} 

Vue.component('component1',{ 
    mixins:[testMixin] 
    ///custom code 
}) 

Vue.component('component2',{ 
    mixins:[testMixin] 
    ///custom code 
}) 

Vue.component('component3',{ 
    mixins:[testMixin] 
    ///custom code 
}) 

親テンプレートで自分自身を繰り返すことをやめる方法はありますか？コンポーネントをローカルに登録して、何らかの形で小道具/イベントをバインドするためにv-forを実行することはできますか？

また、非反応性データはどこで宣言する必要がありますか？

Answer 1

このようなものはありますか？ dynamic componentsを使用してください。

var testMixin = { 
    props:['prop1','prop2'], 
    template: `<div>{{prop1}}</div>` 
} 

const comp1 = Vue.extend({ 
    mixins:[testMixin], 
}) 
const comp2 = Vue.extend({ 
    mixins:[testMixin], 
}) 
const comp3 = Vue.extend({ 
    mixins:[testMixin], 
}) 

Vue.component("parent",{ 
    template:"<div><component v-for='comp in components' :is='comp' :prop1='prop1' :prop2='prop2'></component>", 
    data(){ 
    return { 
     prop1: "prop1", 
     prop2: "some other prop", 
     components: [comp1, comp2, comp3] 
    } 
    } 
}) 

Example。