vue中的中的$emit 与与$on父子组件与兄弟组件的之间通信方式父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输.
主要的传输方式有三种：
1.父组件到子组件通信
2.子组件到父组件的通信
3.兄弟组件之间的通信
一、父组件传值给子组件一、父组件传值给子组件
父组件给子组件传子，使用props
//父组件：parent.vue
<template>
<div>
<child :vals = "msg"></child>
</div>
</template>
<script>
import child from "./child";
export default {
data(){
return {
msg:"我是父组件的数据，将传给子组件"
}
},
components:{
child
}
}
</script>
//子组件：child.vue
<template>
<div>
{{vals}}
</div>
</template>
<script>
export default {
props:{ //父组件传值 可以是一个数组，对象
vals:{
type:String,//类型为字符窜
default:"123" //可以设置默认值
}
},
}
</script>
2.子组件到父组件的通信
使用 $emit(eventname,option) 触发事件,
参数一：自定义事件名称，写法,小写或者用-连接，如event,event-name 不能写驼峰写法(eventName)
子组件给父组件传值，可以在子组件中使用$emit触发事件的值传出去,父组件通过事件监听，获取数据
但是，这里有一个问题，
1、究竟是由子组件内部主动传数据给父组件，由父组件监听接收（由子组件中操作决定什么时候传值）
2、还是通过父组件决定子组件什么时候传值给父组件，然后再监听接收 （由父组件中操作决定什么时候传值）
两种情况都有两种情况都有
2.1 : $meit事件触发,通过子组件内部的事件触发自定义事件$emit
2.2 : $meit事件触发， 可以通过父组件操作子组件 (ref)的事件来触发 自定义事件$emit
资源评论
