组件之间通讯分为三种: 父传子、子传父、兄弟组件之间的通讯
父组件给子组件传值
- 使用
props
,父组件可以使用props
向子组件传递数据。 - 父组件
vue
模板father.vue
:
子组件
vue
模板child.vue:
子组件向父组件通信
父组件向子组件传递事件方法,子组件通过
$emit
触发事件,回调给父组件
父组件vue
模板father.vue
:
子组件
vue
模板child.vue
:
非父子, 兄弟组件之间通信
vue2
中废弃了broadcast
广播和分发事件的方法。父子组件中可以用props
和$emit()
。如何实现非父子组件间的通信,可以通过实例一个vue
实例Bus
作为媒介,要相互通信的兄弟组件之中,都引入Bus
,然后通过分别调用Bus
事件触发和监听来实现通信和参数传递。Bus.js
可以是这样:
在需要通信的组件都引入
Bus.js:
另一个组件也
import Bus.js
在钩子函数中监听on
事件