第一种方式:父传子
需求:将HomePage【父组件】中的数据msg传递给HomeHeader【子组件】
分析:HomePage是HomeHeader组件的父组件
父组件数据传递给子组件---》父传子
步骤:
第一步:在父组件使用子组件时候,绑定自定义属性,属性值就是data中要传递的数据
第二步:在子组件中通过props来接收数据
第一种方案:
//props: ["自定义的那个属性"],
// props: ["msg"],
结果展示:
第二种方案:
props: { //对象的属性就是子组件绑定的属性
msg: {
type: String, //指定要接收的数据类型
default: "100元" //设置默认值,如果没有绑定msg【此时父元素没有msg】,读取的是默认值
}
},
第二种方式:子传父
需求二:在HomeHeader中定义一个数据title,想传递给HomePage组件
子组件传递数据给父组件---》子传父
步骤:--父组件不会主动向子组件要数据
第一步:在子组件中通过$emit("自定义事件名",数据),来发出广播
this.$emit("自定义事件名",数据)
第二步:在父组件使用子组件的时候监听子组件广播的事件,
@自定义事件名="父组件中定义的事件"
父组件事件中的参数data就是子组件发来的数据
第三种方式:兄弟之间传值
需求:兄弟组件传值
HomeHeader和TabBar这两个组件是同一个父级,那么这两个组件是兄弟关系
两种形式:
第一种:A组件和B组件是兄弟,A组件可以将数据传递给父级,父级拿到数据再传递给B组件,达到A传B
第二种:A组件和B组件是兄弟,A组件广播数据到BUS上,B组件去BUS上边取数据就行
实现步骤:先定义一个BUS
1.建一个公共的js模块,引入vue,创建vue实例,暴露vue实例Bus
demo06\src\utils\bus.js
import Vue from "vue" //引入vue模块
let busEvent = new Vue(); //定义一个vue实例对象
export default busEvent; 暴露
2.在A和B组件中分别引入Bus,在A组件中通过Bus.$emit("自定义事件名",数据)
3.在B组件中通过Bus.$on("自定义事件名",(data)=>console.log(data)),data就是传递过来的数据