在 VueJS 中将 props 动态传递给动态组件

javascript vue.js vue-component vuejs2

2022-08-30 02:21:54

我有一个动态视图：

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

与关联的 Vue 实例：

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

这使我可以动态更改组件。

在我的情况下，我有三个不同的组件：、、和。我在它们之间切换，如下所示：myComponentmyComponent1myComponent2

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

现在，我想将道具传递给.myComponent1

如何将组件类型更改为？myComponent1

答案 1

要动态传递 props，您可以将指令添加到动态组件中，并传递一个包含 prop 名称和值的对象：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' }
    }
  }
}

所以现在，当 is 时，它将具有等于 .如果不是这样，则不会传递任何属性。currentComponentmyComponentfoo'bar'

答案 2

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

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

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