Vue 父子组件通信 兄弟组件通信

父组件是通过props属性给子组件通信的来看下代码：

父组件：

<template>
    <child :child="content"></child>
</template>

data(){
    return {
        content:'父组件内容'
    };
}

子组件通过props来接收父组件传过来的数据：（共三种方法）

第一种方法（不指定数据类型）

props: ['child']

第二种方法（指定数据类型）

props: {
    child: String
}

第三种方法（指定数据类型，并且有回调）

props: {
    child: {
        type: String,
        default: '父组件内容' 
    }
}

子组件与父组件通信

子组件代码

<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('box','子组件内容'); //触发box方法，'子组件内容'为向父组件传递的数据
    }
}

父组件代码

<template>
    <div :msg="msg"></div>
    <child @box="tobox" :child-com="content"></child> //监听子组件触发的box事件，然后调用tobox方法
</template>

methods:{
  tobox(msg){
    this.msg = msg
  }
}

兄弟组件之间的通信

新建一个emptyVue.js文件

实例化一个vue实例，相当于一个第三方

import Vue from 'vue'
export default new Vue()

兄弟组件

<div @click="brother"></div>
import vmson from "./emptyVue"  // 引入emptyVue.js
methods: {
    brother() {
        vmson.$emit('blur','哥哥的内容'); //触发事件
    }
}

兄弟组件接收

<div>{{test}}</div>
import vmson from "./emptyVue"  // 引入emptyVue.js
created() {
  vmson.$on('blur', (arg) => { 
      console.log(arg);  // 兄弟组件传来的值
      this.test= arg; 
  });
}