1)、父子组件传值:
-
父 ---> 子传:
-
props --------> 在组件中使用props接收传递的属性数据,在子组件中就可以使用这些数据
-
$root --------> 将数据存储在根组件中,在子组件中使用$root可以获取到根组件对象,进而就可以使用根组件中的数据
-
$parent --------> 将数据存储在父组件中,在子组件中使用$parent获取到父组件对象,就可以使用父组件数据
-
-
子 ---> 父传:
-
this.$emit("" , 数据) --------> 子组件激活父组件中的自定义事件,将数据传递给自定义事件对应处理函数
-
$refs --------> 允许在父组件中获取子组件对象,进而拿到子组件中的数据或者函数等(尽量少用)
-
2)、兄弟组件:
1)、状态提升:子1 ---> 父 ---> 子2
2)、事件总线(event-bus)
原理:使用vue对象的 $on 和 $emit 完成。
具体做法:假设SonA给SonB传递数据。新建一个空的vue对象。在SonA里和SonB引入该vue对象。
$emit:触发事件(在SonA --- 传递者)
$on:绑定事件(在SonB --- 接收者)