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

最新推荐文章于 2024-05-25 22:49:09 发布

原创最新推荐文章于 2024-05-25 22:49:09 发布 · 165 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue 同时被 3 个专栏收录

27 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

本文深入探讨Vue组件通信机制，包括单向数据流原理、props数据传递、自定义事件使用等核心概念，辅以实际代码案例，帮助读者掌握组件间高效通信的方法。

组件通信

我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue
组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。

单向数据流

单向数据流是父子组件的核心概念，props是单向绑定的。
当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。
当父组件属性改变时，会传进子组件。而子组件的属性改变时，会报错。
这样的话可能觉得props有点鸡肋，只能初始化组件的时候用，在子组件内并不能进行操作。其实还是有两种办法去操作props的：
1.定义一个局部变量，并用props初始化它，以后操作这个局部变量。
2.定义一个计算属性，处理props的值并返回。

自定义事件

了解了组件对单向数据流，我们知道了组件从上至下是通过prop传递进行通信的。那从下往上怎么办呢？
vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时，定义事件，子组件通过触发这个事件来与父组件进行通信。

子组件→父组件

当子组件需要向父组件传递数据时，需要用到自定义事件。
Vue 组件有一套观察者模式，子组件用 $e m i t () 来触发事件，父组件用$ on()来监听子组件的事件。

语法结构：

父组件通过v-on:eventName="parentEventName"来设置监听
子组件通过$.emit(‘eventName’)来触发事件
案例1：
两种办法去操作props之一，定义一个局部变量，并用props初始化它，以后操作这个局部变量。即父组件传值→子组件保存初始值
父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。
案例1改写（子组件添加点击事件，维护缓存数据）：
父组件传值→子组件保存初始值
父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改，只用维护childCount，这样可以避免直接操作父组件数据。
案例1改写（不再维护缓存数据，开始影响父组件数据）：
步骤：
①子组件通过$emit(‘eventName’,option)来触发事件
②父组件通过v-on:eventName="parentEventName"来设置监听

①子组件触发事件$emit(‘eventName’,option)
在这里插入图片描述

②父组件设置监听v-on:eventName="parentEventName"并接收参数

在这里插入图片描述

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

案例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 class="demo">
			父组件:{{number}}
			<my-component :num='number' @pass-number='aaFn'></my-component>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('my-component',{
			props:['num'],
			template:`
				<button @click='addChlid'>子组件点击次数{{childNumber}}</button>
			`,
			methods:{
				addChlid(){
					this.childNumber++;
					/*子组件传递*/
					this.$emit('pass-number',this.childNumber)
				}
			},
			data:function(){
				return{
					 childNumber:this.num
				}
			}
		});
		/*实例化vue*/
		var demo = new Vue({
			el:'.demo',
			data:{
				number:6
			},
			methods:{
				aaFn(option){
					console.log(option)
					this.number = option;
				}
			},
			computed:{
				
			}
		})
	</script>
</html>

以上是小编对VUE之组件（组件通信、单向数据流）的见解，如有疑问请随时联系小编！