vue2中常见的组件通信方法

1，父传子:自定义事件配合props

父组件
<template>
  <div class="element">
    <h3>父组件</h3>
    <!-- 父组件向子组件传值通过自定事件 -->
    <son-com :abc="pimsg"></son-com>
  </div>
</template>

<script>
//导入子组件
import sonCom from '@/components/SonCom.vue'
export default {
  components: {
    sonCom
  },
  data () {
    return {
      pimsg: '我是父组件的值'
    }
  }
}
</script>

//子组件
<template>
  <div class="">
    <h4>子组件</h4>
    <p>父组件传过来的值：{{abc}}</p>
  </div>
</template>

<script>
export default {
  // 父组件传过来的值通过props接收,子组件便可以使用
  props: ['abc']
}
</script>

2，子传父 自定义事件配合 $emit

//子组件
<template>
  <div class="">
    <h4>子组件</h4>
    //子组件要向父组件传递值的按钮
    <input type="button" value="子组件传值" @click="sonbtn">
  </div>
</template>

<script>
export default {
  data () {
    return {
      sondata: '我是子组件的值'
    }
  },
  methods: {
    sonbtn () {
      // 子传父，需要通过自定义事件来实现
      // 1. 注册自定义事件 -- 注意 自定义事件名不要使用驼峰命名法!
      this.$emit('son-btn', { sondata: this.sondata })
    }
  },
}
</script>

//父组件
<template>
  <div class="element">
    <h3>父组件</h3>
    <!-- son-btn是子组件注册的自定事件，里面携带着要传递的参数 -->
    <son-com @son-btn="sonbtns($event)"></son-com>
  </div>
</template>

<script>
import sonCom from '@/components/SonCom.vue'
export default {
  components: {
    sonCom
  },
  data () {
    return {
      pimsg: '我是父组件的值'
    }
  },
  methods: {
    sonbtns (val) {
    // val===> { "sondata": "我是子组件的值" }
      this.pimsg = val.sondata
    }
  }
}
</script>

3，兄弟组件之间的传递 -eventBus事件总线

新建一个.js的文件作为中间件
作为事件中心管理组件之间的通信

import Vue from 'vue'
// 定义一个新的vue实例作为事件中心，利用它来监听本身的自定义事件
const tmpCom = new Vue()
export default tmpCom

//兄弟组件之====>大兄弟
<template>
  <div class="">
    <h4>第一个兄第组件</h4>
    <input type="button" value="我是大兄弟" @click="maxbrother">
  </div>
</template>

<script>
 //引入中间件
import tmpCom from '@/router/middleware'
export default {
  data () {
    return {
      brotherdata: '我是大兄弟'
    }
  },
  methods: {
    maxbrother () {
       // 触发事件中心的max-brother事件 
      tmpCom.$emit('max-brother', this.brotherdata)
      console.log(this.brotherdata)
    }
  },
  created () {}
}
</script>

//兄弟组件之====>小兄弟
<template>
  <div class="">
    <h4>第二个兄第组件</h4>
    <p>{{brother}}</p>
  </div>
</template>

<script>
//引入中间件
import tmpCom from '@/router/middleware'
export default {
  data () {
    return {
      brother: '我是小兄弟'
    }
  },
  mounted () {
      // 监听事件中心的max-brother事件
     // 这里的第二个参数必须使用箭头函数
    tmpCom.$on('max-brother', val => {
      this.brother = val
    })
  }
}
</script>

4，注入依赖provide/inject使用

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。

provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。

• provide 钩子用来发送数据或方法。
• inject钩子用来接收数据或方法

//父组件  
data () {
    return {
      pimsg: '我是父组件的值',
      num: 99999
    }
  },
  provide () {
    return {
      num: this.num
    }
  },

//子组件
 inject: ['num'],

5，ref / $refs

这种方式也是实现父子组件之间的通信

ref：这个属性用在子组件上，它的用法就指向了子组件的实例，可以通过实例来访问组件的数据和方法

//子组件
export default {
    data () {
    return {
      name: '我是张三'
    }
  },
  methods: {
    sayHello () {
      console.log('我是李四')
    }
  }
}

//父组件
<template>
  <child ref="child"></child>
</template>

<script>
  import child from './child.vue'
  export default {
    components: { child },
    mounted () {
      console.log(this.$refs.child.name);  // '我是张三'
      this.$refs.child.sayHello();  // 我是李四
    }
  }
</script>

6,children

• 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
  使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。
  

  //子组件
  <template>
    <div>
      <span>{{message}}</span>
      <p>获取父组件的值为:  {{parentVal}}</p>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: '张三'
      }
    },
    computed:{
      parentVal(){
        return this.$parent.msg;
      }
    }
  }
  </script>
  
  

//父组件
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <child></child>
    <button @click="change">点击改变子组件值</button>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: { child },
  data() {
    return {
      msg: 'abc'
    }
  },
  methods: {
    change() {
      // 获取到子组件
      this.$children[0].message = '李四'
    }
  }
}
</script>

通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例
在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
$children 的值是数组，而 $parent是个对象