Vue的组件通讯方式

父子组件通讯

props/$emit

父组件向子组件传值(props) && 子组件对父组件传值($emit 事件) && 使用ref调用子组件的属性跟方法

	// 父组件 使用:value传值给子组件
	<template>
      <div class="main>
        <children :value="value" @back="back" ref="children"/>
      </div>
    </template>
    
    import children from "./component/children";
    export default {
      name: 'parents'
      components: {
       children
      },
      data() {
        return {
      	  value: '这是父组件传给子组件的值'
        }
      },
      methods: {
      	back(value) {
          console.log('这是子组件传给父组件的值', value);
        }
      },
      mounted() {
        this.refs.children.refFunction();
      }
    }
    
    
    // 子组件
    <template>
      <div class="main @click="back">
        {{value}}
      </div>
    </template>
    
    export default {
      name: 'children'
      props: {
      // 接受父组件传入的值 
        value: {
          type: String | Number,
          default: ''
        }
      },
      data() {
      	refValue: 'ref的值'
      },
      methods: {
        back() {
          this.$emit('back', '传递给父组件的值')
        },
        refFunction() {
          console.log('这是通过ref从父组件调用子组件的方法');
        }
      }
    }

兄弟组件通讯

使用事件总线EvenBus进行兄弟组件通讯，可以不经过父组件兄弟组件直接通讯 例如有组件componentA.vue componentB.vue

创建eventBus.js文件

  	import Vue from 'vue';
  	export default Vue;

componentA.vue

  <template>
    <div @click="clickDiv">{{valueA}} -- {{valueB}}</div>
  </template>

  <script>
  // 引入事件总线eventBus
  import EventBus from "./eventBus";
  export default {
    data() {
      return {
        valueA: "valueA",
        valueB: "",
      };
    },
    methods: {
    	clickDiv() {
      	// 给事件总线添加emit事件（映射）
      	EventBus.$emit("handlerA", this.valueA);
      },
    },
    mounted() {
      // 获取事件总线的handlerB事件
      EventBus.$on("handlerB", (res) => {
        this.valueB = res;
      });
    },
  };
  </script>

componentB.vue

 <template>
   <div @click="clickDiv">{{valueA}} -- {{valueB}}</div>
 </template>

 <script>
 // 引入事件总线eventBus
 import EventBus from "./eventBus";
 export default {
   data() {
     return {
       valueA: "",
       valueB: "valueB",
     };
   },
   methods: {
   	clickDiv() {
     	// 给事件总线添加emit事件（映射）
     	EventBus.$emit("handlerA", this.valueA);
     }
   },
   mounted() {
     // 获取事件总线的handlerA事件
     EventBus.$on("handlerA", (res) => {
       this.valueA = res;
     });
   },
 };
 </script>