Passing props dynamically to dynamic component in VueJS

135
votes

I've a dynamic view: 

<div id="myview">
  <div :is="currentComponent"></div>
</div>

with an associated Vue instance:

new Vue ({
  data: function () {
    return {
      currentComponent: 'myComponent',
    }
  },
}).$mount('#myview');

This allows me to change my component dynamically.

In my case, I have three different components: myComponent, myComponent1, and myComponent2. And I switch between them like this:

Vue.component('myComponent', {
  template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}

Now, I'd like to pass props to myComponent1.

How can I pass these props when I change the component type to myComponent1?

5
javascriptvue.jsvuejs2vue-component
You pass props via attributes on the element propName="propValue". Is that your question? – thanksd
I cannot because I never write <myComponent1 propName="propValue"> I change the component programmatically with $parent.currentComponent = componentName – Epitouille
Yeah but you write <div :is="currentComponent"></div>. That's where you'd add the attribute. – thanksd
Yes but props depends of the component. For instance, myComponent1 take props and myComponent2 doesn't take props – Epitouille

5 Answers

263
votes

To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and values:

So your dynamic component would look like this:

<component :is="currentComponent" v-bind="currentProperties"></component>

And in your Vue instance, currentProperties can change based on the current component:

data: function () {
  return {
    currentComponent: 'myComponent',
  }
},
computed: {
  currentProperties: function() {
    if (this.currentComponent === 'myComponent') {
      return { foo: 'bar' }
    }
  }
}

So now, when the currentComponent is myComponent, it will have a foo property equal to 'bar'. And when it isn't, no properties will be passed.

17
votes

You can also do without computed property and inline the object.

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

Shown in the docs on V-Bind - https://vuejs.org/v2/api/#v-bind

10
votes

You could build it like...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }
     
<component :is="comp.component" v-bind="{...comp.props}" v-model="comp.model"/>
1
votes

If you have imported you code through require

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

data: function () {
            return {
                currentView: patientDetailsEdit,
            }

you can also reference the component through the name property if you r component has it assigned

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }
1
votes

I have the same challenge, fixed by the following:

<component :is="currentComponent" v-bind="resetProps"> 
   {{ title }}
</component>

and the script is

export default { 
  …
  props:['title'],
  data() {
    return {
      currentComponent: 'component-name',
    }
  },
  computed: {
    resetProps() {
      return { ...this.$attrs };
    },
}

<div
    :color="'error'"
    :onClick="handleOnclick"
    :title="'Title'"
/>

I'm came from reactjs and I found this solve my issue