vue之间通信也挺简单的,用到的场景挺多的,简单说下。
1 父组件向子组件传递数据
子组件在父组件的并作为标签引入,通过设置标签的属性传递数据,在子组件用props接受,,例如下面这样,父组件parent.vue引入子组件child.vue,将父组件的数据name通过设置标签child的name属性传递给子组件,子组件通过props传递接受,接受后,在子组件内this.name就是父组件的name数据。
parent.vue:
child.vue:
2 子组件向父组件传递数据
子组件通过$emit方法传递数据,emit第一个是事件,后面的是传递的参数,父组件在子组件的标签接受方法并处理
child.vue
parent.vue
3 父组件调用子组件的方法
子组件需要根据父组件的方法进行处理,通常会写一个方法。在父组件数据变动的情况下,就需要调用子组件的方法。我们可以在父组件内将子组件通过哟ref注册,然后用$refs调用子组件的方法
4 兄弟组件传递数据
可以通过子组件a用$emit触发,在子组件b的mounted阶段用$on接收处理。还可以通过组件a通过$emit触发,父组件接受,然后调用子组件b的方法去修改组件B里的值。兄弟组件我基本上没用到,就不上图了。