I have a select inside the component. Depending on the value of the select, another component is rendered in the component.

How to pass props to a dynamic component if I render the component like this:

<component :is="valueSelect"></component>

or how to render a dynamic component with parameter passing

CodePudding user response：

You can pass props to the dynamic component by v-bind with an object with each prop key and value

Ex:

<component :is="valueSelect" v-bind="componentProps"></component>


data: function () {
return {
    valueSelect: 'firstComponent',
  }
},
computed: {
  componentProps: function() {
    if (this.valueSelect === 'firstComponent') {
      return { firstProp: 'one' }
    } else if (this.valueSelect === 'secondComponent') {
      return { secondProp: 'two' }
    }
  }