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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。