【单选题】关于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组件vm
data(){
return {
Aname:"AAA"
}
}
methods:{
Event.$emit("getA",this.Aname)
}
//-----------------------------------
//B组件如何获取
<p>得到A组件Aname的值{{name}}</p>
//B组件引入实例 实例地址
import Event from '....../event'
//B组件的vm
data(){
return{
name:''
}
}
mounted(){
Event.$on("getA",Aname=>{
this.name=Aname })}
最后附张图方便记忆