这篇文章将为大家详细讲解有关“Component组件如何实现动态组件的渲染，操作是什么”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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属性该组件在调试工具中显示的标签就是该名称，标签中的缓存功能用到的也是该名称

关于“Component组件如何实现动态组件的渲染，操作是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用JS怎样做一个点击开始随机抽奖的功能

  这篇文章主要为大家详细介绍了javascript实现随机抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 如何实现vue-router版本降低，具体操作是什么

  vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,下面这篇文章主要给大家介绍了关于降低vue-router版本的2种解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

• vue实现购物车全选反选功能的方法是什么？

  这篇文章给大家分享的是vue实现购物车全选反选功能的方法。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• 使用JavaScript怎么样写alert弹框的功能？

  今天给大家分享的是使用JavaScript实现简易的alert弹框功能的内容，实现效果及代码如下，对新手学习JavaScript有一定的帮助，需要的朋友可以参考，希望大家阅读完这篇文章能有所收获，接下来我们就一起来了解看看吧。

• jQuery的trim函数有什么作用，用法是什么？

  这篇文章给大家分享的是jQuery的trim函数的作用及使用。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。