24.Vue中父子兄弟组件传递数据

1.子向父组件传递数据（基本方式）

子向父组件传递数据通常有：

（1）通过props

（2）自定义事件v-on绑定自定义事件、$emit触发自定义事件

（3）$bus总线直接共享数据

（4）vuex

（5）消息订阅与发布，如pubsub

这里介绍的子向组件传递数据只使用了vue的props、自定义事件

1.通过props

写法：

        在父组件中定义方法xxxx(params) ，再通过props将xxxx方法传递给子组件，

        如：；再在子组件中触发xxxx方法，并将子组件中需要

        传递给父组件的数据携带过去，如：this.sendXxxx(this.params)

2.借助注册自定义事件

写法1：

        在父组件中通过v-on或者@（v-on的简写）方式给子组件注册监听事件，再在子组件中

        通过this.$emit('xxxx',params)触发监听事件，将子组件中的params数据传递给父组

        件中的监听事件xxxx

写法2：

        在父组件中通过this.$refs.子组件绑定的ref名，给子组件注册监听事件，再在子组件中

        通过this.$emit("xxxx",params")触发监听事件，将子组件中的params数据传递给父组件

代码如下：

父组件代码

子组件代码

2.兄弟组件进行数据传递

兄弟组件进行数据传递实际和子组件向父组件传递数据方式一致

（1）通过props将数据传递给父组件，再由父组件传递给子组件（可以通过props）

（2）通过v-on给兄弟组件注册事件，再在兄弟组件中通过$emit传递给父组件，再由父组件

        传递给兄弟组件（可以通过props）

（3）$bus总线直接共享数据

（4）vuex直接共享数据

（5）消息订阅与发布插件，如：pubsub

多余的不再赘述，想详细了解的可以百度