Vue 组件间通讯方式合集（九种）

Vue 提供了各种各样的通讯,在此做个总结， 也是方便查阅。

1、props 父传子

components
├── Parent.vue // 父亲
├── Son1.vue // 儿子1

代码结构

在父亲组件中使用儿子组件，给儿子通过:date="xxx"单向传值

儿子组件通过props接受父组件传过来的值

2、$emit 子传父

components
├── Parent.vue // 父亲
├── Son1.vue // 儿子1

子组件通过触自身的方法来触发$emit方法,再触发父组件的方法,通过回调传参的方式将修改的内容传递给父组件

父组件接受回调params参数，即爸爸需要给儿子绑定了一个自定义的事件，$on("changeNum",params)

3、ref

ref获取的是真实的dom元素，如果放到组件上代表的是当前组件的实例。 父组件中可以直接获取子组件的方法或者数据。

注意事项:ref不要重名, 但是当且仅当使用v-for的时候会导致出现数组情况