• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue 动态组件component

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、component

如何实现动态组件渲染

vue提供了一个内置的<component> ,专门用来实现动态组件的渲染。

这个标签就相当于一个占位符,需要使用is属性指定绑定的组件

<button @click="comName = 'Left'">展示Left</button>

<button @click="comName = 'Right'">展示Right</button>



<div class="box">

	<!-- 渲染Left组件和Right组件 -->

	<!-- component组件是Vue内置的 -->

	<!-- is表示要渲染的组件的名字 -->

	<component :is="comName"></component>

</div>

<script>

	import Left from '@/compeonents/Left.vue'

	import Right from '@/components/Right.vue'



	export default {

		components: {

			Left,

			Right

		},

		data() {

			return {

				//comName 表示要展示的组件的名字

				comName: Left,

			}

		}

	}

</script>

2、keep-alive

2.1存在的问题

当在Left组件中实现一个按钮加一的功能,加一操作后切换组件,再切回来

如下是Left中加一功能

<div class="left-container">

	<h3>Left 组件 ---- {{ count }}</h3>

	<button @click="count += 1">+1</button>

</div>

<script>

	export default {

		data(){

			return {

				count: 0

			}

		}

	}

</script>

操作,进行加一操作后切换到right组件,再切换回来,发现组件中的数据被重写初始化了

使用Vue的生命周期查看Left组件

如下是Left中添加生命周期函数

export default {

	created() {

		console.log('Left 组件被创建了!')

	},

	destoryed(){

		console.log('Left 组件被销毁了~')

	}

}

再次执行上诉操作后,得到的结果如下:

存在的问题: 在切换组件的同时会销毁和创建组件,这样每次切换到同一组件时得到的组件对象就不是同一个了,会重写初始化数据

2.2使用keep-alive解决

keep-alive 组件也是Vue内置的组件,可以直接使用

在App根组件中如下修改:

<keep-alive>

	<!-- keep-alive 可以把内部的组件进行缓存,而不是销毁组件 -->

	<component :is="comName"></component>

</keep-alive>

2.3keep-alive的生命周期

该生命周期,只有在组件使用了keep-alive时才能使用

deactivated当组件被缓存时,自动触发

actived当组件被激活时,自动触发

Left组件中添加如下修改

//当组件第一次被创建时,会先触发created,后触发activated

//当组件被激活时,只会触发activated,不触发created

activated() {

	console.log('组件被激活了,activated')

},

deactivated(){

	console.log('组件被缓存了,deactivated')

}

2.4keep-alive 的 include, exclude属性

keep-alive默认会缓存所有被keep-alive包裹的component里的组件

如何指定需要缓存的组件呢:

使用include / exclude 属性,不能同时使用

<keep-alive include="Left,MyRight">

	<component :is="comName"></component>

</keep-alive>

以上指定了需要缓存的组件名称: 注意这里的组件的名称

Left组件中:

export default{}

Right组件中:

export default{

	//当提供了name属性后,组件的名称就是name属性的值

	name: 'MyRight'

}

区分: 组件内name属性,和组件外注册名 的关系


组件外:

import Left '@/components/Left.vue'

components: {

	Left,

}

这里的注册名只用于组件的引用,如果组件内没有name属性那么name默认就是注册名

组件内:

export default{

	//当提供了name属性后,组件的名称就是name属性的值

	name: 'MyRight'

}

组件内声明了name属性该组件在调试工具中显示的标签就是该名称,标签中的缓存功能用到的也是该名称

到此这篇关于 vue 动态组件component 的文章就介绍到这了,更多相关 vue 动态组件内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JS构造函数和实例化的关系及原型引入发布时间:2022-02-05
下一篇:
Linux&nbsp;安装nodejs环境及路径配置详细步骤发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap