vue 父传子 子传父 兄弟组件传值

一、谁是父？谁是子？兄弟是怎样的关系？

首先确认关系弄清楚谁是父组件，谁是子组件！

例如：a组件引用了b组件，那么a组件就是b组件的父组件，b组件就是a组件的子组件，放图：

在HelloWorld组件中引入了MySwiper组件，HelloWorld组件是MySwiper的父组件，同样MySwiper是HelloWorld的子组件，还有另外一种引用方式，全局注册组件：在main.js中全局注册这个MySwiper组件，在HelloWorld中引入使用同样是上述关系。

 兄弟组件自然不用多说了吧！并列的

二、父传子

首先在父组件中定义一个list,在引入的组件中加入:list="list"属性，在子组件中通过props:{list:String}接收数据，list后面的String就是list数据类型

 

三、子传父

在子组件中使用$emit方法定义一个方法，父组件中@方法名接收这个方法，它的参数是传的值

四、兄弟传值

在main.js中引入eventbus实际就是一个vue实例，export const eventbus = new Vue();直接导出来，在需要使用的组件中引入它， import {eventbus} from "../../main";

在beforeDestory阶段传

 eventbus.$on方法用来接收

 这里需要注意this需要提前声明，可以写一个匿名函数直接接收或者定义一个函数它的参数就是传递的数据值。

 

 接收之后需要销毁否则会触发一次函数传递一次！

event.$off方法。