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

您可以像构建它一样...

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

Answer 3

您也可以不使用计算属性而直接插入对象。

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

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

Answer 4

如果您通过require

导入了代码

＆＃13;

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')

＆＃13;

＆＃13; 并将数据实例初始化为

＆＃13;

data: function () {
            return {
                currentView: patientDetailsEdit,
            }

＆＃13;

如果组件已分配

，您还可以通过name属性引用该组件

＆＃13;

currentProperties: function() {
                if (this.currentView.name === 'Personal-Details-Edit') {
                    return { mode: 'create' }
                }
            }

＆＃13;

Answer 5

我遇到了相同的挑战，并通过以下方法解决了

<component :is="currentComponent" v-bind="resetProps"> 
   {{ title }}
</component>

脚本是

export default { 
  …
  props:['title'],
  data() {
    return {
      currentComponent: 'component-name',
    }
  },
  computed: {
    resetProps() {
      return { ...this.$attrs };
    },
}

<div
    :color="'error'"
    :onClick="handleOnclick"
    :title="'Title'"
/>

我来自reactjs，发现这可以解决我的问题

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

5 个答案: