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

105

我有一个动态的观点：

<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？

— 表象
source

您通过元素上的属性传递道具propName="propValue"。那是你的问题吗？

— 感谢

我不能，因为我从不写过，<myComponent1 propName="propValue">我会以编程方式更改组件$parent.currentComponent = componentName

— Epitouille 17-4-27

是的但是你写<div :is="currentComponent"></div>。在那添加属性。

— 感谢

是的，但道具取决于组件。例如，myComponent1采取道具myComponent2而不采取道具

— Epitouille

213

要动态传递道具，可以将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' }
    }
  }
}

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

— 感谢：D
source

为什么这对我不起作用？它适用于第一个组件，但是在更改“ currentComponent”后，我在子组件上未定义“ e.currentProperties”。

— 里卡多·维加蒂

2

@RicardoVigatti，没有看到您的任何代码，很难知道

— 感谢

嗨，如果我想在中添加内容<component>(here)</component>。有可能吗

— 费利佩·莫拉莱斯

1

@FelipeMorales，是的，您只需要为<slot>要动态渲染的每个组件定义一个默认值即可。vuejs.org/v2/guide/components-slots.html

— 感谢

1

样式指南指出，道具名称应尽可能详细。这种方式违反了规则。这也是我使用的方式，但是我正在寻找更好的解决方案。

— KorayKüpe18年

8

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

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

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

— 提问
source

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

展开摘要

— 康奈尔·塔科（KornélTakó）
source

1

如果您已通过require导入代码

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

展开摘要

并如下所示初始化数据实例

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

展开摘要

您还可以通过name属性引用该组件（如果已为该组件分配了组件）

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

展开摘要

— 马克·道顿
source