学习VUE第九天课程（VUE之组件（组件通信、单向数据流））

怼烎@ 2023-05-31 07:16 68阅读 0赞

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

## 组件通信 ##

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

# 单向数据流 #

##### 单向数据流是父子组件的核心概念，props是单向绑定的。 #####

**当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。  
当父组件属性改变时，会传进子组件。而子组件的属性改变时，会报错。**

##### 这样的话可能觉得props有点鸡肋，只能初始化组件的时候用，在子组件内并不能进行操作。其实还是有两种办法去操作props的： #####

**1.定义一个局部变量，并用props初始化它，以后操作这个局部变量。  
2.定义一个计算属性，处理props的值并返回。**

## 自定义事件 ##

##### 了解了组件对单向数据流，我们知道了组件从上至下是通过prop传递进行通信的。那从下往上怎么办呢？ #####

**vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时，定义事件，子组件通过触发这个事件来与父组件进行通信。**

## 子组件→父组件 ##

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

## 语法结构： ##

**父组件通过v-on:eventName="parentEventName"来设置监听  
子组件通过$.emit(‘eventName’)来触发事件**

## 案例1： ##

**两种办法去操作props之一，定义一个局部变量，并用props初始化它，以后操作这个局部变量。即父组件传值→子组件保存初始值  
父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

##### 数据解耦：子组件数据缓存已经完成，挂载完毕后便于父组件解耦。此时父组件数据变化不再会影响传递到子组件。 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

#### 案例1改写（子组件添加点击事件，维护缓存数据）： ####

**父组件传值→子组件保存初始值  
父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改，只用维护childCount，这样可以避免直接操作父组件数据。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

#### 案例1改写（不再维护缓存数据，开始影响父组件数据）： ####

**步骤：  
①子组件通过$emit(‘eventName’,option)来触发事件  
②父组件通过v-on:eventName="parentEventName"来设置监听**

##### ①子组件触发事件$emit(‘eventName’,option) #####

![在这里插入图片描述][20191023185715177.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
**案例1小结：  
使用事件抛出值：  
有的时候用一个事件来抛出一个特定的值是非常有用的，这时可以使用 $emit 的第二个参数来提供这个值**

# 案例2：点击按钮关闭 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

## 案例2：点击按钮关闭 ##

**①子组件触发事件$.emit(‘eventName’,option)**  
![在这里插入图片描述][20191023185828597.png]  
**②父组件设置监听v-on:eventName="parentEventName"**  
![在这里插入图片描述][20191023185840368.png]

## 以下为代码： ##

<!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title>VUE之组件（组件通信、单向数据流）</title>
    	</head>
    	<body>
    		<div class="demo">
    			<book
    			:name = "name"
    			:description = "description"
    			:author = "author"
    			:status = "status"
    			@change-status="closeArea"
    			></book>
    		</div>
    	</body>
    </html>
    
    <script src="../vue10.9练习/js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    		Vue.component('book',{
    			props:['name','description','author','status'],
    			template:`
    			<div class="nook_area" v-show="childStatus">
    				{
       {name}}--{
       {description}}--{
       {author}}
    				<button @click="close">×</button>
    			</div>
    			`,
    			data:function(){
    				return{
    					childStatus:this.status
    				}
    			},
    			methods:{
    				close(){
    					this.childStatus = false;
    					this.$emit('change-status',this.childStatus);
    				}
    			}
    		})
    		var demo = new Vue({
    			el:'.demo',
    			data:{
    				name:'红楼梦',
    				description:'又名《石头记》，从女娲石补天说起...',
    				author:'曹雪芹',
    				status:true,
    			},
    			methods:{
    				closeArea(status){
    					this.status = status;
    				}
    			}
    		});
    </script>

## 如有疑问或者问题请留言联系小编！！ ##

## 感谢来访！！！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/8c80cdb716c3416f891fc541c17a9c73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/77a99c6c0ef84290805436926ae24e1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/dc08b0fb037e43b1b6bd8a4eae614593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/7a6e6772a1f6411d803b4d3a6f4f9541.png
[20191023185715177.png]: /images/20230531/258c489ebce8474d9d8f7abaa6264376.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/499beb4d361e429aaa335179baa24f7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/6aba61951174497786be5687671831c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/01d83b4b30954128b3d9297733fdc342.png
[20191023185828597.png]: /images/20230531/0b8b102552b6471eb9e1024d136d4993.png
[20191023185840368.png]: /images/20230531/d20bb1e2fc70498da7925b683b2f1e82.png