VUE之组件（组件通信、单向数据流）及VUE之组件（动态组件及keep-alive）

最新推荐文章于 2023-03-27 16:40:10 发布

玺..

最新推荐文章于 2023-03-27 16:40:10 发布

阅读量181

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/F_mengze/article/details/102709017

版权

前端专栏收录该内容

90 篇文章 1 订阅

订阅专栏

VUE之组件（组件通信、单向数据流）

组件通信
我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。
在这里插入图片描述
组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。
接下来介绍下常见父子通信的方法。
单向数据流
单向数据流是父子组件的核心概念，props是单向绑定的。
当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。
当父组件属性改变时，会传进子组件。而子组件的属性改变时，会报错。
这样的话可能觉得props有点鸡肋，只能初始化组件的时候用，在子组件内并不能进行操作。其实还是有两种办法去操作props的：
1.定义一个局部变量，并用props初始化它，以后操作这个局部变量。
2.定义一个计算属性，处理props的值并返回。
自定义事件
vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时，定义事件，子组件通过触发这个事件来与父组件进行通信。
子组件→父组件
当子组件需要向父组件传递数据时，需要用到自定义事件。
Vue 组件有一套观察者模式，子组件用 $e m i t () 来触发事件，父组件用$ on()来监听子组件的事件。
语法结构：
父组件通过v-on:eventName="parentEventName"来设置监听
子组件通过$.emit(‘eventName’)来触发事件
案例1：
在这里插入图片描述
数据解耦：子组件数据缓存已经完成，挂载完毕后便于父组件解耦。
此时父组件数据变化不再会影响传递到子组件。

案例1改写（子组件添加点击事件，维护缓存数据）：
父组件传值→子组件保存初始值
父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改，只用维护childCount，这样可以避免直接操作父组件数据。
在这里插入图片描述

案例1改写（不再维护缓存数据，开始影响父组件数据）：
步骤：
①子组件通过$emit(‘eventName’,option)来触发事件
在这里插入图片描述
②父组件设置监听v-on:eventName="parentEventName"并接收参数

案例1小结：
使用事件抛出值：
有的时候用一个事件来抛出一个特定的值是非常有用的，这时可以使用 $emit 的第二个参数来提供这个值

案例2：点击按钮关闭
在这里插入图片描述
虽然在子组件操作改变父组件数据也可以实现相关效果，但控制台会报错，不推荐使用子组件直接操作父组件数据。
①子组件触发事件$.emit(‘eventName’,option)

②父组件设置监听v-on:eventName=“parentEventName”
在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<book
				:name='name'
				:description='description'
				:author='author'
				:status='status'
				@change-status="closeArea"
			></book>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('book',{
			props:['name','description','author','status'],
			template:`
				<div class='book_area' v-show='childStatus'>
					{{name}}--{{description}}--{{author}}
					<button @click='close'>&times;</button>
				</div>
			`,
			data:function(){
				return{
					childStatus:this.status
				}
			},
			methods:{
				close:function(){
					this.childStatus=false;
					this.$emit('change-status',this.childStatus);
				}
			}
		});
		var app = new Vue({
			el:"#app",
			data:{
				name:'红楼梦',
				description:'又名《石头记》，从女娲炼石补天说起...',
				author:'曹雪芹',
				status:true
			},
			methods:{
				closeArea:function(){
					this.status=status;
				}
			}
		})
	</script>
</html>

VUE之组件（动态组件及keep-alive）

动态组件
首先看下效果图
在这里插入图片描述
选项卡效果可以通过 Vue 的元素加一个特殊的 is 特性实现

Vue可以在不同组件之间进行动态切换，这种方法称为动态组件。

接下来给按钮添加点击事件，点击切换

给按钮添加激活样式

动态组件嵌套
组件同样可以实现选项卡嵌套
在这里插入图片描述
场景：你会注意到，如果你选择了一个选项two，切换到其他标签，然后再切换回公司信息，是不会继续展示你之前选择的two选项的。

分析：这是因为每次切换新标签的时候，Vue 都创建了一个新的child_option实例

动态组件keep-alive
keep-alive译为活着—组件的失活缓存
失活缓存keep-alive：
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。
方案：
为了解决这个问题，可以用一个元素将其动态组件包裹起来。
在这里插入图片描述
以上就是VUE之组件（组件通信、单向数据流）及VUE之组件（动态组件及keep-alive）分享！

玺..

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE之组件（组件通信、单向数据流）及VUE之组件（动态组件及keep-alive）

组件通信我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。接下来介绍下常见父子通信的方法。单向数据流单向数据流是父子组件的核心概念，props是单向绑定的。当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意...
复制链接

扫一扫