Javascript 将 props 动态传递给 VueJS 中的动态组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43658481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing props dynamically to dynamic component in VueJS
提问by Epitouille
I've a dynamic view:
我有一个动态视图：
<div id="myview">
<div :is="currentComponent"></div>
</div>
with an associated Vue instance:
带有关联的 Vue 实例：
new Vue ({
data: function () {
return {
currentComponent: 'myComponent',
}
},
}).$mount('#myview');
This allows me to change my component dynamically.
这允许我动态更改我的组件。
In my case, I have three different components: myComponent, myComponent1, and myComponent2. And I switch between them like this:
就我而言，我有三个不同的部分组成：myComponent，myComponent1，和myComponent2。我像这样在它们之间切换：
Vue.component('myComponent', {
template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}
Now, I'd like to pass props to myComponent1.
现在，我想将道具传递给myComponent1.
How can I pass these props when I change the component type to myComponent1?
当我将组件类型更改为 时，如何传递这些道具myComponent1？
回答by thanksd
To pass props dynamically, you can add the v-binddirective to your dynamic component and pass an object containing your prop names and values:
要动态传递道具，您可以将v-bind指令添加到动态组件并传递一个包含道具名称和值的对象：
So your dynamic component would look like this:
所以你的动态组件看起来像这样：
<component :is="currentComponent" v-bind="currentProperties"></component>
And in your Vue instance, currentPropertiescan change based on the current component:
在您的 Vue 实例中，currentProperties可以根据当前组件进行更改：
data: function () {
return {
currentComponent: 'myComponent',
}
},
computed: {
currentProperties: function() {
if (this.currentComponent === 'myComponent') {
return { foo: 'bar' }
}
}
}
So now, when the currentComponentis myComponent, it will have a fooproperty equal to 'bar'. And when it isn't, no properties will be passed.
所以现在，当currentComponent是 时myComponent，它将具有foo等于的属性'bar'。如果不是，则不会传递任何属性。
回答by Jquestions
You can also do without computed property and inline the object.
您也可以不使用计算属性并内联对象。
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
Shown in the docs on V-Bind - https://vuejs.org/v2/api/#v-bind
显示在 V-Bind 的文档中 - https://vuejs.org/v2/api/#v-bind
回答by Kornél Takó
You could build it like...
你可以像...
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"/>回答by Mark Dowton
If you have imported you code through require
如果您已通过 require 导入您的代码
var patientDetailsEdit = require('../patient-profile/patient-profile-personal-details-edit')data: function () {
return {
currentView: patientDetailsEdit,
}you can also reference the component through the name property if you r component has it assigned
如果您的组件已分配，您还可以通过 name 属性引用该组件
currentProperties: function() {
if (this.currentView.name === 'Personal-Details-Edit') {
return { mode: 'create' }
}
}