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

r囧r小猫 2023-05-31 07:17 20阅读 0赞

## 组件通信 ##

*  我们已经知道，从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。
 *  组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。  
    本节主要介绍下常见父子通信的方法。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]

## 单向数据流 ##

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

## 自定义事件 ##

*  了解了组件对单向数据流，我们知道了组件从上至下是通过prop传递进行通信的。那从下往上怎么办呢？
    
     *  vue规定子组件通过触发事件来与父组件进行通信。即父组件在调用子组件时，定义事件，子组件通过触发这个事件来与父组件进行通信。
 *  子组件→父组件
    
     *  当子组件需要向父组件传递数据时，需要用到**自定义事件**。
 *  Vue 组件有一套观察者模式，子组件用 `$emit()`来触发事件，父组件`$on()`来监听子组件的事件。
 *  **语法结构：**
 *  父组件通过v-on:eventName="parentEventName"来设置监听
 *  子组件通过$.emit(‘eventName’)来触发事件

## 案例1： ##

*  两种办法去操作props之一，定义一个局部变量，并用props初始化它，以后操作这个局部变量。即父组件传值→子组件保存初始值
 *  父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  \*\*数据解耦：\*\*子组件数据缓存已经完成，挂载完毕后便于父组件解耦。
 *  此时父组件数据变化不再会影响传递到子组件。如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  案例1改写（子组件添加点击事件，维护缓存数据）：
    
     *  父组件传值→子组件保存初始值
     *  父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改，只用维护childCount，这样可以避免直接操作父组件数据。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]  
        **案例1改写（不再维护缓存数据，开始影响父组件数据）：**
 *  **步骤：**
    
    ①子组件通过$emit(‘eventName’,option)来触发事件  
    ②父组件通过v-on:eventName="parentEventName"来设置监听
 *  ①子组件触发事件$emit(‘eventName’,option)  
    建议用kebab-case短横线分隔命名  
    ![在这里插入图片描述][20191023192847934.png]
 *  ②父组件设置监听v-on:eventName="parentEventName"并接收参数  
    父组件监听并通过事件名调用,如下图：  
    ![在这里插入图片描述][20191023193014940.png]  
    父组件定义事件,如下图：  
    ![在这里插入图片描述][20191023193049340.png]

## 自定义事件小结 ##

*  案例1小结：
    
     *  使用事件抛出值：
     *  有的时候用一个事件来抛出一个特定的值是非常有用的，这时可以使用 $emit 的第二个参数来提供这个值
 *  案例2：点击按钮关闭  
    ![在这里插入图片描述][20191023193226394.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  ①子组件触发事件$.emit(‘eventName’,option)  
    ![在这里插入图片描述][20191023193315354.png]
 *  ②父组件设置监听v-on:eventName=“parentEventName”  
    ![在这里插入图片描述][20191023193329633.png]  
    ![在这里插入图片描述][20191023193335859.png]  
    下面是一段父子互传的代码

<!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="app">
    			 父组件数据：{
       {number}}
    			<mycomponent :num = 'number' @pass-number='fuFn'></mycomponent>
    		</div>
    	</body>
    	<script type="text/javascript">
    		Vue.component('mycomponent',{
    			props:['num'],
    			template:`
    				<button @click="addChild">子组件点击次数{
       {childNumber}}</button>
    			`,
    			data:function(){
    				return {
    					childNumber:this.num
    				}
    				
    			},
    			methods:{
    				addChild(){
    					this.childNumber++
    					/* 子组件传递 */
    					this.$emit('pass-number',this.childNumber)
    				}
    			},
    			
    		})
    	
    		var app = new Vue({
    			el:'.app',
    			data:{
    				number:6
    			},
    			methods:{
    				fuFn(option){
    					this.number=option
    				}
    			},
    			computed:{
    				
    			}
    		})
    	</script>
    </html>

## 完毕！！！有问题留言小编… ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/7ff87b96bc8e48a2907e512f911fe782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/0f99af172e154c71bce01fd8d8366de4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/8330744f01cb493fa9b14c68a26ca81b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/7bebe2d0be004b85921ec38b05617207.png
[20191023192847934.png]: /images/20230531/3fdb38d2da03436fb3fababbb86e7a20.png
[20191023193014940.png]: /images/20230531/fe1f6b2a1d2a4a7792ab761a9e6bdf41.png
[20191023193049340.png]: /images/20230531/62847d5ab7f94f87891562bc4e4c153d.png
[20191023193226394.png]: /images/20230531/7843e821cba34488aae6acc50bcab6d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/c84e68aa5ee84dbb835105e94386430f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/3c3a96059ed94fa595657acf7bc79bbb.png
[20191023193315354.png]: /images/20230531/d7118461a91a4598ba7fb1465950b27a.png
[20191023193329633.png]: /images/20230531/4017f0d870ba42268cd7849d89bfc940.png
[20191023193335859.png]: /images/20230531/52f202d7f6234c3f8c0db964205f03a9.png