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

我有一个动态的观点:

<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时，如何传递这些道具？

112523 次浏览
小开
最佳答案

要动态传递道具，可以向动态组件添加 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'。如果不是，则不会传递任何属性。

小开

如果您已经通过 request 导入了代码

var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')
and initalize the data instance as below

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

如果为 r 组件赋值了 name 属性，也可以通过 name 属性引用该组件

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

小开

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

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

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

小开

你可以把它造成..。

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

小开

我也面临同样的挑战，解决办法如下:

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

我来自反应组织，我发现这能解决我的问题

小开

当你使用 v-for中的 <component>时，你可以改变 谢谢的答案如下:

methods: {
getCurrentProperties(component) {
if (component === 'myComponent') {
return {foo: baz};
}
}
},

用途

<div v-for="object in object.items" :key="object._your_id">
<component :is="object.component" v-bind="getCurrentProperties(object.component)" />
</div>

如果有更简单的方法，请告诉我。


提交答案