每一个组件之间的作用域是孤立的,这意味着组件之间的数据不应该出现引用关系,即使出现了也不允许组件操作组件内部以外的其他数据。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:移除事件。