将道具动态传递给VueJS中的动态组件

Question

我有一个动态的观点:

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

与关联的Vue实例:

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

这允许我动态地更改我的组件.

就我而言,我有三个不同的部分组成:myComponent,myComponent1,和myComponent2.我在他们之间切换如下:

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

现在,我想把道具传递给myComponent1.

当我将组件类型更改为时,如何传递这些道具myComponent1？

Answer 1

要动态传递道具,您可以将v-bind指令添加到动态组件并传递包含您的道具名称和值的对象:

所以你的动态组件看起来像这样:

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

在您的Vue实例中,currentProperties可以根据当前组件进行更改:

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

所以现在,当它currentComponent是myComponent,它将具有foo等于的属性'bar'.如果不是,则不会传递任何属性.

Answer 2

您也可以不使用计算属性并内联对象。

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

显示在 V-Bind 的文档中 - https://vuejs.org/v2/api/#v-bind

Answer 3

你可以像...

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"/>