vue2组件间通信情景有哪些？简要说明一下，附面试题1

【单选题】关于vue2组件间通信说法错误的是（）

A. vuex可以实现任何关系的组件间的通信

B. 子组件可以通过$emit给父组件传值

C. 可以通过context进行组件间传值

D. 如果子组件修改，通过props获取的父组件传过去的字符串或数字会报错

先独立思考

正确答案：C

解析：

c选项 说法错误，context是用在react中进行组件间的传值，vue2并不提供该方法，vue2组件间传值可以通过props、$emit、Vuex,事件总线。通过props获取父组件的基本数据类型的值，在修改时会报错，修改深层对象的属性是不会报错的。

知识点扩展

vue组件中的通信情景共有3种，它们分别是：父子组件通信，子父组件通信，兄弟组件通信

父子组件通信

//父组件 把值num传给子组件Child <Chlid :num="num"></Child>
data(){  return {  //父组件的num    num:99  }}//---------------------------------------------
//子组件 Child 用props接收 //展示<p>{{num}}</p>export default{ //用props接收 父组件传过来的值  props:['num']}

子父组件通信

//子组件没法直接操作prop里面的数据，会报错//子组件 这里有个按钮 需要绑定一个点击事件add 通知父组件来改变数据<button @click="add">点我加1</button><p>{{num}}</p>//子组件vm区props:["num"]methods:{//子组件的方法  add(){    //可以理解为点击按钮 通知父组件调用父组件的addnum方法     this.$emit("addnum")  }}//-----------------------------------------//父组件data(){  return {    num:99  }},methods:{  //父组件定义这个方法 子组件一点击就可以改变num的值  addnum(){    this.num++  }}

兄弟组件通信

$emit $on  ，这种方法通过一个空的Vue实例作为中央事件总线，用它来触发事件和监听事件，巧妙而轻量的实现了任何组件间的通信。

具体实现方式

//$emit $on var Event=new Vue()Event.$emit(事件名,数据)Event.$on(事件名,data=>{})

//假设一个组件有两个子组件 A B//B 想获取A的数据<A></A><B></B>//------------------------------//先在一个空文件 (event) 新建一个vue实例 并导出import Vue from 'vue'export default new Vue//-------------------------------//A组件引入实例  实例地址import Event from '....../event'//A组件vmdata(){  return {    Aname:"AAA"  }}methods:{  Event.$emit("getA",this.Aname)}//-----------------------------------//B组件如何获取<p>得到A组件Aname的值{{name}}</p>//B组件引入实例  实例地址import Event from '....../event'//B组件的vmdata(){  return{    name:''  }}mounted(){  Event.$on("getA",Aname=>{    this.name=Aname  })}

 最后附张图方便记忆