如何在Vue.js中动态安装单个文件组件 [英] How to mount dynamically single file component in Vue.js
问题描述
我有一个文件组件 Main.Vue 。
我还有其他三个单个文件组件 A.vue ， B.vue 和 C.vue 。
I also have three other single file components A.vue, B.vue and C.vue.
我希望能够在主内部展示每次都要一个不同的组件。我做的是：
I want to be able to show inside Main.Vue a different component each time. What I did was this:
<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的样子：
This works but not exactly what I wanted. I wanted a different file Factory.js, which does the importing of all the components A,B,C,.. And has functions that return my component, which I can use somehow in Main.vue. Here's what I tried Factory.js to look like:
import A from './A.vue';
import B from './B.vue';
function getComponent(){
if (..)
return new A();
else if (..)
return new B();
...
}
这根本不起作用。
我想要工厂文件方法，因为：
This didn't work at all. I want the factory file approach because:
1）我想将它拆分为不同的工厂文件
1) I want to split it to different factory files
2）我想将数据附加到每个组件。所以我将有一个对象，其中包含返回实际组件的函数+一些额外的数据，如name
2) I want to "Attach" data to each component. So I'll have an object that contains the function returning the actual component + some additional data like "name"
任何想法如何做到这一点？
Any ideas how to do this?
推荐答案
使用Vue的动态组件
您可以使用动态组件可在组件之间动态切换。您需要将组件定义对象绑定到组件元素的 is 属性 - Vue的文档很漂亮自我解释。以下是一个简短的例子：
Use Vue's Dynamic Components
You could use Dynamic Components to dynamically switch between components. You will need to bind the component definition object to the is attribute of the component element – Vue's documentation on this is pretty self explanatory. Below is also a brief example:
<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',
},
},
};
您可以直接将组件定义对象绑定到数据属性本身：
You could directly bind the component definition object to the data property itself:
import componentA from 'component/a';
import componentB from 'component/b';
export default {
data() {
return {
activeComponent: componentA,
};
},
};
要切换组件，您可以通过编程方式更改 activeComponent 。
To switch out components you can programmatically change the value of activeComponent.
可以实现更强大的动态安装组件的方式使用组件呈现功能。要做到这一点，我们必须创建我们自己的版本的Vue的组件元素 - 我们称之为 ElementProxy ：
A more powerful way of dynamically mounting components can be achieved using component render functions. To do this we must create our own version of Vue's component element – we'll call this the 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 代理元素。这样做的另一个好处是你可以将道具作为一个对象传递，这将解决将道具传递给具有不同模型的动态组件的问题。
You can now use the ElementProxy to proxy elements. The additional benefit of this is that you can pass props in as an object which will solve the problem of passing props to dynamic components with differing models.
<template>
<element-proxy :type="activeComponent" :props="props"></element-proxy>
</template>
import ElementProxy from 'components/elementProxy';
export default {
components: {
ElementProxy,
},
data() {
return {
activeComponent: 'componentA',
props: { ... },
};
},
};
进一步阅读
- Vue的动态组件文档
- Vue的渲染功能文档
- GitHub发布绑定道具的线程
- Vue's documentation for dynamic components
- Vue's documentation for the render function
- GitHub issue thread for binding props
Further reading
这篇关于如何在Vue.js中动态安装单个文件组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
