[Vuejs]-In vue，how to pass values to children component when using component tag for dynamic switching component

by

0👍

You can bind prop object to dynamic component

const props = {
 customProp: 'foo'
}


<component :is="showNow" v-bind="props"></component>

0👍

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="showNow" v-bind="currentProperties"></component>

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

data: function () {
  return {
    currentComponent: 'showNow',
  }
},
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.

Leave a comment