vue组件通信

在实习过程中，有许多地方需要用到组件通信，尝试过几种方法，现来总结一下
说明：Father.vue 是父组件 ，Brother.vue和Brather.vue是子组件

父子通信

父传子

1. props：
   父组件：
   通过v-bind绑定一个变量，childBrather则是子组件要引用的名称。

   <div>
     我是父组件
     <Brather v-bind:childBrather="content"></Brather>
   </div>

import Brather from './brother/Brather'
export default {
  data () {
    return {
      content: '我是父'
    }
  },
  components: { Brather }
}

子组件：

export default {
  props: ['childBrather'],  //父组件传过来的值
  data () {
  },
  created () {
    console.log(this.childBrather)  //像正常data变量一样使用即可
  }
}

props格式：

//格式一
props: {
    childBrather: String // 这里指定了字符串类型，如果类型不一致会警告哦
}

//格式二：
props: {
    childBrather: {
        type: String,
        default: 'sichaoyun' 
    }
}

props: ['childBrather']

//格式三

子传父：

1. this.$emit绑定一个事件
   子组件

<div>
    我是brather组件
    <button @click="toFather">点我触发</button> //绑定一个事件 在此中向父组件传值
</div>

  data () {
    return {
      form: {
        name: 'Joanne',
        age: 22
      }
    }
  },
  methods: {
    toFather () {
      this.$emit('myFunction', this.form)   //向父组件传值，第一个参数为父组件要绑定的函数名，第二个为要传的值
    }
  }

父组件：

   <div>
     我是父组件
     <Brather @myFunction="toshow"></Brather>
   </div>

  methods: {
    toshow (msg) {
      console.log(msg) //接受一个参数，该参数则为接收的值
    }
  }

2. this.$emit('input',value)和v-model
   v-model这个双向绑定相当于做了两个操作：
   给当前这个组件添加了一个value属性；
   给当前这个组件绑定了一个input事件；
   通常用在input等组件上
   子组件：

<div>
    我是brather组件
    <input @input="toFather" v-model="content">  //绑定input事件 ，只要输入就能使其传入父组件
</div>

 props: ['value'],  //即父组件v-model的值
  data () {
    return {
      content: ''
    }
  },
  methods: {
    toFather () {
      this.$emit('input', this.content) //传入父组件
    }
  }

父组件：

   <div>
     我是父组件
     <Brather v-model="faContent"></Brather>
   </div>

 data () {
    return {
      faContent: ''
    }
  },
  created () {
  },
  components: { Brather },
  watch: 
    faContent:function(){
      console.log('father', this.faContent)  //子组件变化，父组件也会跟着变化
  }

3. $refs

官方： $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

父组件可以通过此拿到子组件实例，data值和方法
子组件：

<div>
    我是brather组件
</div>

  data () {
    return {
      content: '我是子组件啦啦啦'
    }
  },
  methods: {
    myfunction () {
      console.log('我是方法')
    }
  }

父组件:

   <div>
     我是父组件
     <Brather ref="myson"></Brather>
     <button @click="toMySon"></button>
   </div>

 data () {
    return {
    }
  },
  created () {
  },
  components: { Brather },
  methods: {
    toMySon () {
      console.log(this.$refs.myson.content)
      this.$refs.myson.myfunction()
    }
  }

兄弟通信

1.bus中央总线
借助一个媒介传值
创建一个eventBus.js

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

//哥哥
<div>
    我是brather组件
    <button @click="myBrother">传值给老弟</button>
</div>

import bus from './eventBus'

  data () {
    return {
      content: '我是哥哥组件啦啦啦'
    }
  },
  methods: {
    myBrother () {
      bus.$emit('button', this.content)
    }
  }

弟弟

import bus from './eventBus'
export default {
  created () {
    bus.$on('button', (msg) => {
      console.log(msg)
    })
  }
}

任意关系均可使用此方法