Passing props dynamically to dynamic component in VueJS

javascript vue.js vuejs2 vue-component

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?

You pass props via attributes on the element propName="propValue". Is that your question?

I cannot because I never write <myComponent1 propName="propValue"> I change the component programmatically with $parent.currentComponent = componentName

Yeah but you write <div :is="currentComponent"></div>. That's where you'd add the attribute.

Yes but props depends of the component. For instance, myComponent1 take props and myComponent2 doesn't take props

Spent one hour trying to make this happen. Thank you so much!

thanksd

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.

Why this is not working for me? It works for the first component, but after i change the “currentComponent” i get a “e.currentProperties” is undefined on child component.

@RicardoVigatti, without seeing any of your code, it's pretty hard to know

@FelipeMorales, yep, you'd just need to define a default <slot> for each component you are dynamically rendering. vuejs.org/v2/guide/components-slots.html

The style guide says that prop names should be as detailed as possible. This way breaks the rule. This is also what I use, but I am looking for a better solution.

@KorayKüpe you are mis-quoting the style guide here. It says "prop definitions should always be as detailed as possible". The intent of a dynamic component inherently means that prop names and structure will almost certainly be different between components loaded into this structure.

tony19

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://v2.vuejs.org/v2/api/#v-bind

Kornél Takó

You could build it like...

comp: { component: 'ComponentName', props: { square: true, outlined: true, dense: true }, model: 'form.bar' }

Montaser Almohasen

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

Mark Dowton

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

why function was used?

Passing props dynamically to dynamic component in VueJS

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US