vue动态组件的实现

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_40816649/article/details/100066777

在vue中组件是可以通过component标签来进行动态切换的。

 components文件夹下创建component和list组件，然后在main.js中设置成为公共组件（具体公共组件相关的在之前的博客有），
这样在各个vue文件中都可以直接使用该组件了。

import ListItem from './components/list.vue'//封装共用组件方法一(共用组件)
Vue.component('ListItem',ListItem)
import child from './components/component/component.js'//封装共用组件方法二(插件)
Vue.use(child)

这里我将组建的名称定义成了‘ListItem’和‘child’这两个名字。
动态组件的实现
data中定义一个组件名称的字符串componentStr然后将该字段绑定到component这个标签的is字段上，通过改变componentStr的名字来切换对应的组件。

    <button @click="componentStr == 'ListItem' ? componentStr = 'child' : componentStr = 'ListItem'">切换组件</button>
    <!-- 动态组件 -->
    <component :is="componentStr"></component>

动态组件的使用场景有很多，掌握了动态组件对往后的项目会有很大的帮助。