vue3.0动态组件,vue用于动态切换组件的内置组件
本文主要介绍vue的动态组件。vue提供了一个内置组件，专门用来渲染动态组件。这个标签相当于一个占位符，您需要使用is属性来指定绑定的组件。想了解更多细节的，可以参考下面这篇文章的具体内容。
目录
1、组件2、保持活动2.1问题2.2使用保持活动来解决2.3保持活动生命周期2.4保持活动的包含、排除属性
1、component
如何实现动态组件渲染
Vue提供了一个内置组件，专门用来渲染动态组件。
这个标记相当于一个占位符，您需要使用is属性来指定绑定的组件。
Button @click=comName=Left 显示左边/button
Button @click=comName=Right 显示右边/button
div class=box
！-渲染左组件和右组件-
！-组件组件内置于Vue中-
！- is表示要呈现的组件的名称-
组件：is= com name /组件
/div
脚本
从 @/components/Left . vue 导入左侧
从“@/components/Right.vue”导入权限
导出默认值{
组件：{
左边，
对吧
},
data() {
返回{
//comName表示要显示的组件的名称。
comName:左，
}
}
}
/脚本
2、keep-alive
2.1存在的问题
当左边组件实现一个按钮加一个功能时，增加一个后切换组件，再切换回来。
如下所示，在左侧添加一个函数
div class=左容器
H3组件-{{count}}/H3
button @click=count=1 1/button
/div
脚本
导出默认值{
data(){
返回{
计数：0
}
}
}
/脚本
操作，加完一个，切换到右边的组件，再切换回来，发现组件里的数据已经被重写初始化了。
使用Vue的生命周期查看左侧组件。
是在下面左边增加了生命周期功能。
导出默认值{
已创建(){
Console.log(左侧组件已创建！)
},
destoryed(){
Console.log(左侧组件被破坏~ )
}
}
再次执行上诉操作后，得到的结果如下：
存在的问题：切换组件时，组件会被销毁和创建，这样每次切换到同一个组件时，组件对象就不会一样，初始化数据也会被重写。
2.2使用keep-alive解决
Keep-alive组件也是Vue的内置组件，可以直接使用。
在App根组件中如下修改：
点火电极
！- keep-alive可以缓存内部组件，而不是销毁它们-
组件：is= com name /组件
/保持活力
2.3keep-alive的生命周期
只有当组件使用保持活动时，才能使用此生命周期。
缓存组件时会自动触发Deactivated。
当组件被激活时自动触发。
将以下修改添加到左侧组件中
//第一次创建组件时，会先触发created，再触发activated。
//当一个组件被激活时，只会触发activated，不会创建。
已激活(){
Console.log(组件已激活，已激活)
},
停用(){
Console.log(组件被缓存、停用)
}
2.4keep-alive 的 include, exclude属性
缺省情况下，Keep-alive缓存由keep-alive包装的组件中的所有组件。
如何指定需要缓存的组件呢：
使用include/exclude属性，而不是两者都使用。
keep-alive包括=Left，MyRight
组件：is= com name /组件
/保持活力
以上指定了需要缓存的组件名称：请注意此处组件的名称。
Left组件中：
导出默认值{}
Right组件中：
导出默认值{
//当提供name属性时，组件的名称就是name属性的值。
名称：“MyRight”
}
区分：组件中的名称属性和组件外的注册名称之间的关系
组件外：
导入Left @/components/Left.vue
组件：{
左边，
}
这里的注册名称只是用于组件的引用，如果组件中没有name属性，那么这个名称默认为注册名称。
组件内：
导出默认值{
//当提供name属性时，组件的名称就是name属性的值。
名称：“MyRight”
}
name属性在组件中声明。调试工具中显示的组件标签是名称，标签中的缓存函数也使用名称。
这就是这篇关于vue动态组件的文章。有关vue动态组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。