CODEWITHSUNDEEP
vue.js
Eric Guan
Eric Guan

Reputation: 15992

Loop and bind props to different components

I have 3 different child components that all need exactly the same props and custom event listeners.

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

Is there any way i can stop repeating myself in the parent template? Can i register components locally and then somehow perform a v-for on them to bind props/events?

Also, where should i declare non-reactive data?

Upvotes: 1

Views: 869

Answers (1)

Bert
Bert

Reputation: 82439

Something like this? Using 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.

Upvotes: 2

Related Questions