vue——组件通信

• 我们都知道，vue的两大核心就是数据驱动和组件系统，但组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。往往我们都要通过组件之间传递数据来达到数据同步，所以组件之间的通信就显得尤为重要，下面介绍三种最常用常用的组件通信方式方式及其用法：

父子组件通信（props）

父组件：

<template>
  <div class="home">
    <child  :mag="fatherText" /> //自定义方法名传递参数
  </div>
</template>

<script>
import Child from '../components/child.vue'; //引入子组件
export default {
  name: "Home",
  components: {
    Child,
  },
  data(){
    return{
      fatherText: "欢迎来到vue", //定义变量
    }
  }
};

父组件要做三件事情：

1. 引入子组件
2. 定义要传递的数据
3. 通过 :自定义名称=‘要传递的数据’形式进行传递，例如上面的:msg=“fatherText”

子组件：

<template>
  <div>
    <p>父组件传递给我：“{{mag}}”</p>  //使用参数
  </div>
</template>

<script>
export default {
  name: "SrcGis",
  props: { //接收参数
    mag: String,//参数默认类型
  },
  mounted() {},
  methods: {},
};
</script>

子组件要做两件事情：

1. 通过props接收参数
2. 在组件中通过{{参数}}使用参数，用法跟data里面定义的变量用法一致。

通信前：

通信后：

子父组件通信（$emit）

子组件：

<template>
  <div>
    <p>子组件要传递给父组件：{{BText}}</p>
    <button @click="toFather">传递</button>  //通过事件触发
  </div>
</template>

<script>
export default {
  data() {
    return {
      BText: "在好好学习vue",
    };
  },
  methods:{
    toFather(){
      this.$emit('chind', this.BText);//通过$emit传递，第一个参数为自定义方法名，第二个参数为要传递的参数
    }
  }
};
</script>

子组件要做两件事情：

1. 自定义事件
2. 在自定义事件里面通过$emit方法传递参数

父组件：

<template>
  <div class="home">
    <p>子组件对传给父组件：“{{ childText }}”</p> 
    <child @chind="chind"/>  //通过自定义事件接收，必须与子组件定义的方法名保持一致
  </div>
</template>

<script>
import Child from "../components/child.vue";   //引入子组件
export default {
  name: "Home",
  components: {
    Child,
  },
  data() {
    return {
      childText: "",
    };
  },
  methods: {
    chind(val) { //接收参数
      this.childText = val;
    },
  },
};
</script>

父组件要做三件事情：

1. 引入子组件
2. 通过@子组件定义是方法名=‘自定义方法名’监听子组件
3. 通过自定义方法名（可以子组件的自定义方法名保持一致）接收参数

使用$emit要注意两点：
1.组件之间是严格的父子关系。
2.自定义的事件名必须全为小写。
通信前：

通信后：

兄弟组件通信（bus）

兄弟组件通信最直接的方法就是使用vuex,但是如果不使用vuex的情况下，可以使用进行不同组件之间的通信

第一步：新建Bus.js文件（我是在src/utils下建的）

import Bus from 'vue';
let install = function(Vue) {
    // 设置eventBus
    Vue.prototype.bus = new Bus(); 
}

export default { install };

第二步：在main.js中引入并使用

import bus from './utils/Bus'
Vue.use(bus)

第三步：在要传递参数的组件中使用this.bus.$emit(‘f自定义方法名’，‘参数’)进行传参

<template>
  <div>
    <p>我是A，我要<span style="color:skyblue;cursor: pointer;" @click="toB">传给B组件</span>："{{AText}}"</p>
  </div>
</template>
<script>
export default {
  name: "A",
  data() {
    return {
      AText:'欢迎来到Vue'
    };
  },
  methods:{
    toB(){
      this.bus.$emit('AToB',this.AText) //传递
    }
  }
};
</script>

第四步：在接收参数的组件中，在created生命周期通过this.bus.$on{(}^{\prime }方法{名}^{\prime },回调方法）接收参数，并且要在beforeDestroy生命周期通过this.bus.$off(“方法名”);销毁，否则会重复执行且执行次数愈来愈多，导致页面加载非常缓慢。

<template>
  <div>
    <p>我是B，A组件对我说："{{ BText }}"</p>
  </div>
</template>

<script>
export default {
  name: "B",
  data() {
    return {
      BText: "",
    };
  },
  created() {
    this.bus.$on("AToB", (message) => {  //接收
      this.BText = message;
    });
  },
  beforeDestroy() {
   this.bus.$off("AToB");
  },
};
</script>

通信前：

通信后：