Vue.js 向Vue应用程序动态添加组件的最佳方法

向vue应用程序动态添加组件的最佳方法是什么

假设您的应用程序中有三个不同的组件，您希望根据数据的值显示每个组件

数据：（）=>({
表：1
})

我将仔细研究所有可能的方法，并选择最好的。

使用

v-if

或

v-show

第一个明显的方法是向组件添加

v-if

，如下所示：

如果您愿意，也可以使用

v-show

，这取决于您自己

查看

v-show

和

v-if

之间的区别

这可能是最简单的方法，但不是最有效的方法。 一旦你的代码开始变得更复杂，这段代码将是你的地狱

使用Vue的动态组件 第二种方法是使用Vue的动态组件

下面是我们的动态组件示例：

计算：{
组件：函数（）{
// 1
返回`自定义组件-${this.tab}`；
//或
// 2
如果（this.tab==1）返回“custom-component-1”；
如果（this.tab==2）返回“custom-component-2”；
如果（this.tab==3）返回“custom-component-3”；
}
},
数据：（）=>({
表：1
})

我们只需要传递组件的名称：

使用

computed

和

is

属性，我们可以动态地拥有无限个组件。 这是一个干净的好方法。将计算部分从标记中移除，并将其放入脚本中，以获得更干净、更高效的代码

顺便说一句，上面的代码中有一个bug，你能发现吗？：）

提示：它在计算部分

如果使用这种方法，请确保导入并初始化要在页面中使用的组件，或将它们添加到

main.js

文件中，如下所示：

从“Vue”导入Vue；
从“~/components/Component1.vue”导入组件1；
从“~/components/Component2.vue”导入组件2；
从“~/components/Component3.vue”导入组件3；
新Vue({
el:“#应用程序”，
组成部分：{
“自定义组件-1”：组件1，
“自定义组件-2”：组件2，
“自定义组件-3”：组件3，
}
})

或

从“Vue”导入Vue；
从“~/components/Component1.vue”导入组件1；
从“~/components/Component2.vue”导入组件2；
从“~/components/Component3.vue”导入组件3；
Vue.组件（“自定义组件-1”，组件1）；
Vue.组件（“自定义组件-2”，组件2）；
Vue.组件（“自定义组件-3”，组件3）；

您还可以将组件添加到页面：

从“~components/customComponent”导入customComponent；

导出默认值{
组成部分：{
自定义组件：“自定义组件”
}
}