VUE2之间的组件通信----详细介绍

一.父子组件之间通信

1.props：父组件向子组件传递数据

父组件：

<template>
  <div id="app">
    <Child :strData="strData" />
  </div>
</template>
​
<script>
import Child from "./components/Soncomponents.vue";
​
export default {
  components: {
    Child, // VUE2需要写出组件，导入要写
  },
  data() {
    return {
      strData: "我是父组件Parent中的数据", //父组件中传递给子组件的数据;
    };
  },
};
</script>
<style></style>

子组件：

<template>
  <section>
    {{ strData }}
  </section>
</template>
​
<script>
export default {
  props: {
    //props用来接收父组件中传递的数据，子组件拿来用
    strData: {
      type: String,
      default: "",
    },
  },
};
</script>
​
<style></style>

2.$emit：子组件向父组件传递数据

父组件:

<template>
  <div id="app">
    <Child @sendMsg="getChildMsg" />
  </div>
</template>
<script>
import Child from "./components/SonComponents.vue";
export default {
  components:{ // VUE2需要写出组件，导入要写
    Child,
  },
  methods:{
    getChildMsg(value){ // 父组件用来接收子组件传递的数据的方法
      console.log(value);
    }
  }
};
</script>
<style>
</style>

子组件：

<template>
  <section>
      <button @click="sendM">传值</button>
  </section>
</template>
<script>
export default{
  data(){
      return{
          msg: '传给父组件的数据',
      }
  },
  methods:{
      sendM(){
          this.$emit('sendMsg',this.msg)
      }
  }
}
</script>
<style></style>

3.sync实现父子组件的双向绑定

父组件：

<template>
  <div id="app">
    {{title}}
    <Child :title.sync="title"/>
  </div>
</template>
<script>
import Child from "./components/SonComponents.vue";
    export default {
  components:{ // VUE2需要写出组件，导入要写
    Child,
  },
  data(){
    return{
      title: '初始标题',
    }
  }
};
</script>
<style>
</style>

子组件：

<template>
    <section>
        <button @click="change">改变标题</button>
    </section>
</template>
<script>
export default{
props:{
    title:{
        type: String,
        default: '初始标题',
    }
},
methods:{
    change(){
        this.$emit('update:title','5555') //子组件修改title内容，父组件传入也被修改
    }
}
}
</script>
<style></style>

4.v-model：可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据

父组件：

<template>
  <div id="app">
    {{ title }}
    <Child v-model="title" />
  </div>
</template>
<script>
import Child from "./components/SonComponents.vue";
export default {
  components: {
    // VUE2需要写出组件，导入要写
    Child,
  },
  data() {
    return {
      title: "初始标题",
    };
  },
};
</script>
<style></style>

子组件：

<template>
  <section>
    <button @click="change">改变标题</button>
  </section>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "初始标题",
    },
  },
  /*model:{
      event:"update:title" // 可以修改事件
  },*/
  methods: {
    change() {
      this.$emit("input", "5555"); //子组件修改title内容，父组件传入也被修改,默认事件为input
    },
  },
};
</script>
<style></style>

5.ref：在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

父组件：

<template>
  <div id="app">
    <Child ref="child" />
  </div>
</template>
<script>
import Child from "./components/SonComponents.vue";
export default {
  components: {
    // VUE2需要写出组件，导入要写
    Child,
  },
  mounted() {
    const child = this.$refs.child;
    console.log(child.name); // 调用子组件中数据
    child.someMethod("调用了子组件的方法"); // 调用子组件中的方法
  },
};
</script>
<style></style>

子组件:

<template>
  <section></section>
</template>
<script>
export default {
  data() {
    return {
      name: "小明",
    };
  },
  methods: {
    someMethod(msg) {
      console.log(msg);
    },
  },
};
</script>
<style></style>

二.父组件与孙子组件之间通信

父组件:

<template>
  <div id="app">
    <Child :prop1="value1" :prop2="value2" @sendMsg="getSun" />
  </div>
</template>
<script>
import Child from "./components/SonComponents.vue";
export default {
  components: {
    // VUE2需要写出组件，导入要写
    Child,
  },
  data() {
    return {
      value1: "李华",
      value2: 15,
    };
  },
  methods: {
    getSun(value) {
      console.log("收到孙子组件传来的数据", value); // 设置函数来接收孙子组件传来的数据
    },
  },
};
</script>
<style></style>

子组件：

<template>
    <section>
        <SunCom v-bind="$attrs" v-on="$listeners"></SunCom>
    </section>
</template>
​
<script>
import SunCom from "./SunCom.vue";
​
export default{
    components:{
        SunCom,
    },
    props:['prop1'], // 只声明了Prop1，prop2会被包含在attrs中
    inheritAttrs: false
}
</script>
​
<style></style>

孙组件:

<template>
  <section>
    <h2>{{ prop1 }}</h2>
    <h3>{{ prop2 }}</h3>
    <button @click="$emit('sendMsg', '111')"></button>
  </section>
</template>
<script>
export default {
  props: ["prop1", "prop2"],
};
</script>
<style>
button {
  width: 100px;
  height: 40px;
}
</style>

三.通用组件通信

1.$children /$parent，实现父子组件和父孙组件之间的通信

$chilidren:this.$children[0].someMethod() // 调用第一个子组件的方法 this.$children[0].name // 获取第一个子组件中的属性

$parent: this.$parent.someMethod() // 调用父组件的方法 this.$parent.name // 获取父组件中的属性

2.provide / inject，传入数据不是响应式，除非传入 一个可监听数据

父组件:

<script>
import Child from "./components/SonComponents.vue";
export default {
  components: {
    // VUE2需要写出组件，导入要写
    Child,
  },
  data() {
    return {
      msg: "小芳",
    };
  },
  provide() {
    return {
      name: "李华",
      msg: this.msg, // data 中的属性
      someMethod: this.someMethod, // methods 中的方法
    };
  },
  methods: {
    someMethod() {
      console.log("这是依赖注入的方法");
    },
  },
};
</script>

子组件:

<script>
export default {
  inject: ["name", "msg", "someMethod"],
  mounted() {
    console.log(this.msg);
    console.log(this.name);
    this.someMethod();
  },
};
</script>

3.EventBus：中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作

①.创建eventBus文件,并导出Vue实例

import VUE from 'vue'
​
export default new VUE();

②.发送数据组件调用bus.$emit(“事件名”,传递的数据),触发事件

<template>
  <section>
    <div class="box">
      {{ msg }}
      <button @click="sendMsg"></button>
    </div>
  </section>
</template>
​
<script>
import bus from "../utils/eventBus";
export default {
  data() {
    return {
      msg: "兄弟组件发送数据",
    };
  },
  methods: {
    sendMsg() {
      bus.$emit("send", this.msg); // 通过bus.$emit将组件数据发送出去
    },
  },
};
</script>
​
<style>
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
}
button {
  width: 100px;
  height: 40px;
}
</style>

③.接收数据组件调用bus.$on(“事件名”，回调函数)，绑定事件

<template>
  <section>
    <div class="a">
      {{ reciveMsg }}
    </div>
  </section>
</template>
​
<script>
import bus from "../utils/eventBus";
export default {
  data() {
    return {
      reciveMsg: "",
    };
  },
  created() {
    bus.$on("send", (val) => {  // // 通过bus.$on将组件数据接收
      this.reciveMsg = val;
    });
  },
};
</script>
​
<style>
.a {
  width: 200px;
  height: 200px;
  background-color: blueviolet;
}
</style>