详解Vue组件通信

父子组件的通信是开发是最常用的也是最重要的

二级标题你们一定知道父子通信是用prop传递数据的

父组件

<template>
    <div>
        <!-- 将数据绑定到了组件的msg上 -->
        <EmitSon :msg="msg"/>
    </div>
</template>
<script>
import EmitSon from './childs/EmitSon'
export default {
    name: 'EmitInfor',
    data() {
        return {
            msg: '父向子传参-props'
        }
    },
    components: {
        EmitSon
    }
}
</script>

子组件

<template>
    <div>
        {{msg}}
    </div>
</template>
<script>
export default {
    name: 'EmitSon',
    props: ['msg']
}
</script>

---

子组件向父组件

父组件

<template>
  <div>
    <EmitSon @infor="getInfor" />
    {{msg}}
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      msg: ""
    };
  },
  components: {
    EmitSon
  },
  methods: {
    getInfor(val) {
      this.msg = val;
    }
  }
};
</script>

子组件

<template>
  <div>
    <button @click="postInfor">向父组件发送信息</button>
  </div>
</template>
<script>
export default {
  name: "EmitSon",
  methods: {
    postInfor() {
      this.$emit("infor", "您好，父组件");
    }
  }
};
</script>

---

同级组件通信

1. 需要有一辆通信车 eventBus

中央事件总线的方式: 新建一个Vue事件bus对象，然后通过bus.on监听触发的事件。

/lib/bus.js

import Vue from 'vue';
export default new Vue;

main.js

import eventBus from './lib/bus'
Vue.prototype.$eventBus = eventBus;

发送信息的一方

<template>
  <div>
    <button @click="postInfor">向同级组件发送信息</button>
  </div>
</template>
<script>
export default {
  name: "EmitSon2",
  methods: {
    postInfor() {
      this.$eventBus.$emit("bortherInfor", "您好，大哥组件");
    }
  }
};
</script>

接收信息的一方

<template>
  <div>
    接收同级组件的信息： {{msg}}
  </div>
</template>
<script>
export default {
  name: "EmitSon",
  data() {
      return {
          msg: ''
      }
  },
  mounted() {
      this.$eventBus.$on('bortherInfor', val => {
          this.msg = val;
      });
  }
};
</script>

---

深层组件嵌套祖先与子组件通信(listener)

Vue 2.4开始提供了: listener

祖先组件

<template>
  <div>
    <EmitSon :msgc="msgc" @changeMsgc="changeMsgc"/>
    <h1>{{msgc}}</h1>
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      msgc: "hello C组件"
    };
  },
  components: {
    EmitSon
  },
  methods: {
      changeMsgc(val) {
          this.msgc = val;
      }
  }
};
</script>

第一层组件嵌套

<template>
  <div>
    <!-- 接收同级组件的信息： {{msg}} -->
    <EmitSon2 v-bind="$attrs" v-on="$listeners" />
  </div>
</template>
<script>
import EmitSon2 from "./EmitSon2";
export default {
  name: "EmitSon",
  data() {
      return {
          msg: ''
      }
  },
  components: {
      EmitSon2
  },
  mounted() {
      this.$eventBus.$on('bortherInfor', val => {
          this.msg = val;
      })
  }
};
</script>

第二层组件嵌套

<template>
  <div>
    <input type="text" v-model="$attrs.msgc" @input="postMsg($attrs.msgc)">
    <EmitSon3 v-bind="$attrs" v-on="$listeners"/>
  </div>
</template>
<script>
import EmitSon3 from "./EmitSon3";
export default {
  name: "EmitSon2",
  methods: {
    postMsg(val) {
        this.$emit('changeMsgc', val)
    }
  },
  components: {
      EmitSon3
  }
};
</script>

第三层组件嵌套

<template>
  <div>
      <input type="text" v-model="$attrs.msgc" @input="postMsg($attrs.msgc)">    
                                                      <!-- @input="changeInp" -->
  </div>
</template>
<script>
export default {
  name: "EmitSon3",
  methods: {
    postMsg(val) {
        this.$emit('changeMsgc', val)
    }


    // changeInp(event) {
    //         console.log(event);
    //         this.$emit('changemsg', event.target.value);
    // }
  }
};
</script>

---

5. provide与inject

父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据
只要在父组件的生命周期内，子组件都可以调用

父组件

<template>
  <div>
    <EmitSon />
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      msgc: ""
    };
  },
  components: {
    EmitSon
  },
  provide: {
      information: 'provide的方法'
  }
};
</script>

子组件

<template>
  <div>{{information}}</div>
</template>
<script>
export default {
  name: "EmitSon",
  data() {
    return {
      msg: ""
    };
  },

  inject: ["information"]
};
</script>

---

6. children

父组件

<template>
  <div>
    <EmitSon />

    {{message}}
    <button @click="changeChild">changeChild</button>
  </div>
</template>
<script>
import EmitSon from "./childs/EmitSon";
export default {
  name: "EmitInfor",
  data() {
    return {
      message: 0
    };
  },
  components: {
    EmitSon
  },
  methods: {
      changeChild() {
          this.$children[0].message += 100;
      }
  },
  provide: {
      information: 'provide的方法'
  }
};
</script>

子组件

<template>
  <div>
    {{information}}
    {{message}}
    <button @click="changeParent">改变父组件数据</button>
  </div>
</template>
<script>
export default {
  name: "EmitSon",
  data() {
    return {
      message: 0
    };
  },
  methods: {
    changeParent() {
      this.$parent.message += 50; 
    }
  },
  inject: ["information"]
};
</script>

7. vuex