Use Vue's Dynamic Components
可以使用Dynamic Components在组件之间动态切换.您需要将component definition对象绑定到component元素的is属性——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',
},
},
};
可以直接将组件定义对象绑定到数据属性本身:
import componentA from 'component/a';
import componentB from 'component/b';
export default {
data() {
return {
activeComponent: componentA,
};
},
};
要切换出组件，可以通过编程方式更改activeComponent的值.
Use a render function
使用组件render functions可以实现更强大的动态安装组件的方法.要做到这一点，我们必须创建Vue component元素中的our own version个元素——我们将其称为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: { ... },
};
},
};
Further reading