vue中的数据传递以及事件传递(父子组件之间的数据互传)


每一个组件之间的作用域是孤立的,这意味着组件之间的数据不应该出现引用关系,即使出现了也不允许组件操作组件内部以外的其他数据。vue中,允许向组件内部传递props数据,组件内部需要声明该字段,如下声明一个child组件:

 

父组件向该组件传递数据:

事件传递:vue内部实现了一个事件总线系统,即EventBus。EventBus作为沟通桥梁,每一个vue组件实例都继承了EventBus,都可以接受$on和发送事件$emit。

上面的例子中,如果child.vue向改变parent.vue组件的parentMsg数据,就需要将修改的parentMsg事件传递给child.vue,让child.vue来触发修改parentMsg事件。如:

父组件:

 

父组件 parent.vue 向子组件 child.vue 传递了 updateMsg 事件,在子组件实例化的时候,子组件将 updateMsg 事件使用$on函数注册到组件内部,需要触发事件的时候,调用函数this.$emit来触发事件。

除了父子组件之间的事件传递,还可以使用一个 Vue 实例为多层级的父子组件建立数据通信的桥梁,如:

 

 除了$on和$emit以外,事件总线系统还提供了另外两个方法,$once和$off,所有事件如下:
  $on:监听、注册事件。
  $emit:触发事件。
  $once:注册事件,仅允许该事件触发一次,触发结束后立即移除事件。
  $off:移除事件。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM