一、父子组件通信
1、父组件传递数据给子组件,使用props属性来实现
传递普通字符串
父组件:
子组件:
结果: hello!
动态:父组件数据如何传递给子组件
父组件:
子组件:通过props属性接收数据
props属性验证有以下形式:
2、子组件与父组件通信
vue是单向数据传递的,如果子组件直接改变父组件传过来的数据是不允许的。但是可以通过触发事件通知父组件改变数据,实现改变子组件的目的。
子组件:
父组件:
二、非父子组件通信
有时候,非父子关系的两个组件之间也需要通信。在简单的场景下,可以使用一个空的 Vue 实例作为事件总线。原理就是把 Vue 实例当作一个中转站。
方法2:
在初始化web app的时候,main.js给data添加一个 名字为eventhub 的空vue对象。就可以使用 this.$root.eventHub 获取对象。
在组件内调用事件触发
在另一个组件调用事件接受,移除事件监听器使用$off方法。