vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信 一、父组件传值给子组件父组件给子组件传子,使用props //子组件:child.vue
{{vals}}
2.子组件到父组件的通信 使用 参数一:自定义事件名称,写法,小写或者用-连接,如event,event-name 不能写驼峰写法(eventName) 子组件给父组件传值,可以在子组件中使用$emit触发事件的值传出去,父组件通过事件监听,获取数据 但是,这里有一个问题, 1、究竟是由子组件内部主动传数据给父组件,由父组件监听接收(由子组件中操作决定什么时候传值) 2、还是通过父组件决定子组件什么时候传值给父组件,然后再监听接收 (由父组件中操作决定什么时候传值) 两种情况都有2.1 : $meit事件触发,通过子组件内部的事件触发自定义事件$emit 2.2 : $meit事件触发, 可以通过父组件操作子组件 (ref)的事件来触发 自定义事件$emit 第一种情况:子组件的数据为:{{msg}}
第二种情况:子组件的数据为:{{msg}}
将两者情况对比,区别就在于$emit 自定义事件的触发是有父组件还是子组件去触发 第一种,是在子组件中定义一个click点击事件来触发自定义事件$emit,然后在父组件监听 第二种,是在父组件中第一一个click点击事件,在组件中通过refs获取实例方法来直接触发事件,然后在父组件中监听 3.兄弟组件之间的通信 (1)、兄弟之间传递数据通过事件 (2)、创建一个新Vue的实例,让各个兄弟共用同一个事件机制。(关键点) (3)、传递数据方,通过事件触发$emit(方法名,传递的数据)。 (4)、接收数据方,在mounted()钩子函数(挂载实例)中 触发事件$on(方法名,callback(接收数据的数据)),此时callback函数中的this已经发生了改变,可以使用箭头函数。
A组件->{{msg}}
//兄弟组件b:childb.vue
b组件,a传的的数据为->{{msg}}
//父组件:parent.vue
到此,vue中的组件通信传值基本可以搞定了,但是对于大型复杂的项目,建议采用vuex 状态管理更适合.... 推荐参考学习:
总结以上所述是小编给大家介绍的vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |