Vue中常见的几种组件间通信方法

1.props（父传子）

父组件Parent.vue

<template>
    <child :msg="message"></child>
</template>

父组件通过:val="value"的形式定义要传给子组件的值value绑定到val上
子组件Child.vue

export default {
 //写法一 用数组接收
  props:['msg'], 
   //写法二 用对象接收，可以绑定接收的数据类型、设置默认值、验证等
    props:{
        msg:{
            type：string,
            default:"这是默认值"
        }
    },  
    created(){
        console.log(this.msg)
    }
}

子组件通过props的方法接收父组件绑定的val

2.$emit（子传父）

父组件Parent.vue

<template>
	<p>{{num}}</p>
    <child @getVal="getvalue()"></child>
</template>
<script>
export default { 
	components:{
		child
	},
    data(){
    	return{
    		num=''
    	}
    },
    methods:{
     	getvalue(val){
     		this.num = val
     	}
    }
}
</script>

子组件Child.vue

export default { 
    data(){
    	return{
    		val=1
    	}
    },
    methods:{
     	sendval(){
     	this.$emit("getVal",this.val)
     	}
    }
}

3.EventBus事件总线（兄弟组件间传值）

创建事件中心管理组件之间的通信

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

兄弟A通过 $emit 进行派发传值，兄弟B通过 $on 接收A的值

4、依赖注入（provide / inject）

这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法,inject钩子用来接收数据或方法

provide() { 
    return {     
        num: this.num  
    };
}
inject: ['num']

注意： 依赖注入所提供的属性是非响应式的。

5、$parent / $children

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

<template>
  <div>
    <span>{{message}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue'
    }
  },
  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: 'Welcome'
    }
  },
  methods: {
    change() {
      // 获取到子组件
      this.$children[0].message = 'JavaScript'
    }
  }
}
</script>

在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。
1.通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例
2.在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
3.在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
4.$children 的值是数组，而 $parent是个对象

6、$root

将数据data挂载在vue实例上，子组件通过this.$root.xxx 可以访问

7. 跨代通信$attrs $listeners