根据名称，字符串或配置加载和创建VueJS组件。
首先，如果您刚开始使用VueJS，这对您来说可能有点太高级了，我强烈建议您阅读VueJS上的文档，尤其是组件。
前言
根据用户输入交换组件，甚至只是通过json文件设置表单，这是一个非常有用的方法，可以在整个大项目中保持较低的理智水平，因为通常有数百个组件/表单/页面/等，所以进行更改在代码中，它可能会导致涟漪效应，并打破其他地方的东西。
由于VueJS将处理DOM的所有脏细节，因此我们可以专注于解决业务问题。
我将介绍按名称加载组件，创建动态和异步组件。
组件的“神奇”
如果没有检查动态和异步组件以获取更多详细信息，那么动态操作就不那么容易了。基本上，组件将呈现组件，异步功能或组件名称。
按名称加载组件
使用将允许您按名称访问全局和本地组件。
在上试试吧
// add some different components globaly
Vue.component("test-comp0", {
template: `comp0
`
});
Vue.component("test-comp1", {
template: `comp1
`
});
Vue.component("test-comp2", {
template: `comp2
`
});
// sample app
new Vue({
el: "#app",
components: {
// add a local component
// check https://vuejs.org/v2/guide/components-registration.html#Component-Names
TestComp3: {
template: `comp3 locally registered component
`
}
// you can also add some components from other files, using ES6 import or required.
},
data() {
return {
componentIndex: 0
};
},
computed: {
componentName() {
return "test-comp" + this.componentIndex;
}
},
template: `
Component: {{componentIndex}}
组件之间的动态循环
组件之间的循环很有用，但在现实世界中，你会传递一些道具。要添加道具，我们可以更改组件test-comp0和应用模板。
Vue.component("test-comp0", {
props: ["name"], // please use the object props for production
template: `Hello {{name}}
`
});
...
// add name prop
在动态组件上使用prop
这会将prop名称传递给每个组件。为了解决这个问题，我们可以有一个计算属性并将其绑定到组件。
// app
new Vue({
el: "#app",
: {
// add a local
// check #-Names
: {
: `
comp3
// you can also add some from other files, using ES6 or .
},
data() {
{
: 0,
name: "pikax"
};
},
: {
() {
"test-comp" + this.;
},
() {
if (this. == 0) {
{
name: this.name
};
{}; // empty
},
: `
: {{}}
});
根据组件传递道具
即时组件
即时组件是我们使用生成的组件，这显示了它的强大功能，一些用例场景将构建小部件。
我们可以根据用户输入生成和测试组件。
注意：要非常小心，这可能允许攻击者攻击您的应用程序，请确保源是可信的！
在上试试吧
new Vue({
el: "#app",
data() {
return {
componentDefinition: `{ template: "Hello" }`
};
},
computed: {
myComponent() {
return eval(`(${this.componentDefinition})`);
}
},
template: `
Change me
使用的完全动态组件
您可以在更改时看到，组件应该立即渲染。我不建议使用它，但我认为这是一个很好的例子。
导入异步组件