我有一个文件组件Main.Vue.
我还有三个其他单个文件组件A.vue,B.vue和C.vue.
我希望每次都能在Main.Vue内部显示一个不同的组件.我做的是这样的:
<template>
<div>
<a v-if="isAVisible" ></a>
<b v-if="isBVisible" ></a>
</div>
</template>
<script>
import A from './A.vue';
import B from './B.vue';
...
这可行但不完全是我想要的.我想要一个不同的文件Factory.js,它可以导入所有组件A,B,C,..并且具有返回我的组件的函数,我可以在Main.vue中以某种方式使用它.这是我试过Factory.js的样子:
import A from './A.vue';
import B from './B.vue';
function getComponent(){
if (..)
return new A();
else if (..)
return new B();
...
}
这根本不起作用.我想要工厂文件方法,因为:
1)我想将它拆分为不同的工厂文件
2)我想"附加"数据到每个组件.所以我将有一个对象,其中包含返回实际组件的函数+一些额外的数据,如"name"
任何想法如何做到这一点？
您可以使用动态组件在组件之间动态切换.您需要将组件定义对象绑定到元素的is属性component- Vue的文档是非常自我解释的.以下是一个简短的例子:
<template>
<component :is="activeComponent"></component>
</template>
import componentA from 'component/a';
import componentB from 'component/b';
export default {
components: {
componentA,
componentB,
},
data() {
return {
activeComponent: 'componentA',
},
},
};
您可以直接将组件定义对象绑定到data属性本身:
import componentA from 'component/a';
import componentB from 'component/b';
export default {
data() {
return {
activeComponent: componentA,
};
},
};
要切换组件,您可以以编程方式更改值activeComponent.
使用组件渲染功能可以实现动态安装组件的更强大的方法.要做到这一点,我们必须创建我们自己的Vue component元素版本 - 我们称之为ElementProxy:
import componentA from 'component/a';
import componentB from 'component/b';
export default {
components: {
componentA,
componentB,
},
props: {
type: {
type: String,
required: true,
},
props: {
type: Object,
default: () => ({}),
},
},
render(createElement) {
const { props: attrs } = this;
return createElement(element, { attrs });
},
};
您现在可以使用ElementProxy代理元素.这样做的另一个好处是,您可以将props作为对象传递,这将解决将props传递给具有不同模型的动态组件的问题.
<template>
<element-proxy :type="activeComponent" :props="props"></element-proxy>
</template>
import ElementProxy from 'components/elementProxy';
export default {
components: {
ElementProxy,
},
data() {
return {
activeComponent: 'componentA',
props: { ... },
};
},
};