Vue组件（四）-组件之间的通信

阳光穿透心脏的1/2处 2023-06-21 12:24 4阅读 0赞

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例和可选的嵌套的、可复用的组件树组成。对于单页应用而言不存在没有关系的组件，至少所有的组件都有一个根组件，在我看来组件的关系可以这样分：  
父子，兄弟、祖先后代、其他亲戚（叔侄、堂兄弟、远亲等等）。

通常在项目比较大时，使用状态管理解决方案`Vuex`实现组件通信，下面是在不必要使用Vuex的情况下组件通信的方法。

下图中，有4个组件，涵盖了前面所的4种关系，我们来实现这4个组件的通信。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
父子关系有：Root与Child1,Root与Child2，Child1与Child11,反过来就是子父关系  
兄弟关系有：Child1与Child2  
祖先后代关系有：Root与Child11  
亲戚关系有：Child2与Child11

### 父向子传值 ###

实际上我们在前面已经讲过了，方法是：

1.  在父组件中动态绑定要传递的数据（下面动态绑定了money），如果只想传递一个静态的属性，可以不绑定，如下面的message。
2.  用子组件的`props`属性用于接收来自父组件的数据。

假设父亲要给儿子5块钱来花花，这个例子中，子组件想把父组件传来的参数作为局部数据来用

<div id="app">
      <label>root:</label>
      <p>第{
       {times}}次给了{
       {amount}}元，共计给了{
       {totalAmount}}元</p>
      <child-1 :inital-amount="amount" message="来自父组件:" inline-template>
        <div>
          <label>child-1:</label>
          <p>{
       {message+initalAmount}}</p>
          <p>我的钱：{
       {myMoney}}</p>
          <button v-on:click="cost">{
       {myMoney>0? "花钱" : "要钱"}}</button>
        </div>
      </child-1>
    </div>
    <script src="./vue.js"></script>
    <script> new Vue({ el: "#app", data:{ amount:5, totalAmount:5, times:1 }, components: { 'child-1': { data(){ return { myMoney:this.initalAmount} }, props:["initalAmount","message"], methods:{ cost(){ if(this.myMoney===0){ return; } this.myMoney--; } }, watch:{ initalAmount(){ this.myMoney=this.initalAmount; } } }, } }); </script>

应该避免在子组件中直接修改props的值。  
在子组件中修改父组件传递的props属性值，子组件的props属性会修改成功，但不会影响父组件，同时Vue会报出警告。  
如果父组件传递一个对象给子组件，父组件的值会随之改变，并且不会报出警告。

> 父级 prop 的更新会向下流动到子组件中，但是反过来则不行；每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值,这叫做单向数据流。

### 子向父传值 ###

子向父传值需要做两件事，一个是触发自定义事件，一个是监听事件，绑定事件处理函数。  
上面的例子中，如果需要当子组件的myMoney为0时，发起与父组件的通信，相应的可以这样做

#### 方法一：$emit结合v-on指令 ####

用`$emit`方法触发子组件的自定义事件，在父组件中用`v-on指令`监听事件，并指定事件处理函数。

##### 1、触发 #####

子组件中用 $emit() 方法触发`当前实例`上的自定义事件

*  修改子组件的cost方法，触发ask事件，并传递一个随机数作为参数
    
        cost(){ 
          if(this.myMoney===0){ 
            this.$emit('ask', Math.floor(Math.random()*10) );
            return;
          }
          this.myMoney--;
        }

##### 2、监听 #####

在父组件模板中引用子组件的位置上用v-on绑定绑定事件监听器

*  监听ask事件，指定ask事件的处理函数handleAsk
    
        <child-1 :inital-amount="amount" message="来自父组件:" v-on:ask="handleAsk" inline-template>
            ...
        </child-1>
 *  在父组件的methods选项中定义函数handleAsk()，并接受参数
    
        methods:{ 
          handleAsk(amount){ 
            this.totalAmount+=amount;
            this.amount=amount;
          }
        }

这个方法中如果我们查看子组件的实例，会发现它的 l i s t e n e r 属 性 中 出 现 了 一 个 a s k 方 法 ， ‘ v m . listener属性中出现了一个ask方法， \`vm. listener属性中出现了一个ask方法，‘vm.listeners\`中包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。使用$listeners可以获取到父组件传递进来的所有事件函数。  
![在这里插入图片描述][20191220113011907.png]

#### 方法二： e m i t / emit/ emit/on ####

在子组件中用`$emit`方法触发`父组件的自定义事件`，在父组件中$on方法监听自定义事件。

##### 1、触发 #####

*  修改子组件的cost方法，触发父组件的ask事件，并传递一个随机数作为参数
    
        cost(){ 
          if(this.myMoney===0){ 
            this.$parent.$emit('ask', Math.floor(Math.random()*10) );
            return;
          }
          this.myMoney--;
        }

###### 2、监听 ######

*  在父组件created生命周期中使用$on方法监听自定义事件
    
        created(){ 
              this.$on('ask',amount=>{ 
                console.log(amount)
                this.handleAsk(amount)
              });
            },
 *  在父组件的methods选项中定义函数handleAsk()，并接受参数
    
        methods:{ 
          handleAsk(amount){ 
            this.totalAmount+=amount;
            this.amount=amount;
          }
        }

> $emit() 方法有两个参数：第一个参数是事件名，后边的参数是要传递的额外的参数

[vm.$emit()的用法参考官方文档][vm._emit]  
![在这里插入图片描述][20191213140635281.gif]

### 兄弟组件传值 ###

在本例中，我们要实现child-1向child2传值，第一种方法，可以通过先子传父再父传子来实现，方法略。  
另一种方法，可以建立一个“信息中转站”（新的vue实例），本例中我们给它命名Hub，他是一个全局的Vue实例，只用来触发事件和监听事件，用这个方法可以实现任何关系的组件间的通信。  
![在这里插入图片描述][20191220135330517.gif]

<div id="app">
      <label>root:</label>
      <p>child-1发送的消息：<span ref="receiver"></span></p>
      <child-1 inline-template>
        <div>
          <label>child-1:</label>
          <p>我的钱：{
       {myMoney}}</p>
          <button v-on:click="handleClick">发送消息</button>
          <child-1-1 inline-template>
            <div>
              <label>child-1-1:</label>
              <p>child-1发送的消息：<span ref="receiver"></span></p>
            </div>
          </child-1-1>
        </div>
      </child-1>
      <child-2 inline-template>
        <div>
          <label>child-2:</label>
          <p>child-1发送的消息：<span ref="receiver"></span></p>
        </div>
      </child-2>
    </div>
    <script src="./vue.js"></script>
    <script> let Hub = new Vue(); //全局声明了一个Vue实例Hub new Vue({ el: "#app", created() { Hub.$on('send', val => { this.$refs.receiver.innerHTML = val; }) }, components: { 'child-1': { data() { return { myMoney: 10000 } }, methods: { handleClick() { Hub.$emit('send', this.myMoney); } }, components: { 'child-1-1':{ created() { Hub.$on('send', val => { this.$refs.receiver.innerHTML = val; }) } } } }, 'child-2': { created() { Hub.$on('send', val => { this.$refs.receiver.innerHTML = val; }) } } } }); </script>

注意：在上例中，Hub.$on()方法绑定的事件处理函数一定要用`箭头函数`，否则其中的this指向的是Hub。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213105054472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw==,size_16,color_FFFFFF,t_70
[20191220113011907.png]: https://img-blog.csdnimg.cn/20191220113011907.png
[vm._emit]: https://cn.vuejs.org/v2/api/#vm-emit
[20191213140635281.gif]: https://img-blog.csdnimg.cn/20191213140635281.gif
[20191220135330517.gif]: https://img-blog.csdnimg.cn/20191220135330517.gif