vue组件之间数据的传递

Posted 2020-10-10 小目标

父子组件通信

父组件向子组件传递数据：

1、通过子组件的 props 选项声明它期待获得的数据，用以接收父组件传过来的值。

2、在子组件标签中使用子组件props中创建的属性

3、父组件中注册子组件

4、把需要传给子组件的值赋给在子组件中声明的属性。

子组件向父组件传递数据：

1、在子组件中以某种方式使用$emit来触发一个自定义事件，并传递参数（1个或者多个参数），参数将作为实参传递给父元素中监听事件的回调函数。

2、父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。不能用 $on 侦听子组件释放的事件，而必须在模板里直接用 v-on 绑定。

兄弟组件通信

在简单的场景下，可以使用一个空的vue实例作为中央事件总线。

更为复杂的场景下，使用vuex。