父组件、子组件、兄弟组件间的数据传递笔记
/*
设置项目的自启动:
1.vue.config.js里:在transpileDependencies: true下加上:
devServer: {
open: true, //配置打开服务器
host: "localhost",//自动打开浏览器
port: 9527//配置端口号
}
*/
/*
src下新建文件夹views,里面存放页面
注意:HomePage文件夹下新建components存放关于首页可复用的组件
*/
/*
补充:
1.在vue脚手架中,@默认指向src目录
import HomePage from "@/views/HomePage/HomePage.vue";
2.配置@路径的提示:
下载Path Autocomplete插件
在设置setting.json里:
//导入文件时是否携带文件扩展名
"path-autocomplete.extensionOnImport": true,
"path-autocomplete.pathMappings": {
"@": "${folder}/src"
},
*/
/*
父子组件之间的传值:
HomePage.vue(父组件)
HomeHeader.vue(子组件)
步骤:
1.父组件使用子组件时,绑定自定义属性
<HomeHeader :属性名="属性值"></HomeHeader>
<HomeHeader :msg="msg"></HomeHeader>
值:msg需要在父组件的data中定义msg
2.在子组件中,通过props来接收数据
方法一:props:["自定义属性"]
props:["msg"]
方法二:props:{
msg:{
type:String,
default:"100元" //设置默认值,若没有绑定,使用这个
}
}
*/
/*
子传父:
组件中的this指的是该组件
步骤:
1.在子组件中,通过$emit("自定义事件名",数据),来发出广播,这个广播数据附带数据。
this.$emit("sendtitle", this.title);
2.父组件使用子组件的时候监听子组件的广播事件 @自定义事件名="父组件中定义的事件"
<HomeHeader @sendtitle="fatherReceive"></HomeHeader>
在methods中定义一个方法:
parentEventFnT(data){
console.log(data); //data就是子组件传递的数据
}
*/
/*
兄弟间传递:
两种形式:
1.A传父,父传B
2.A广播数据到Bus上,B组件到Bus上取数据就行
a.src下创建utils文件夹,新建bus.js
引入vue模块
import Vue from "vue"
实例化一个Vue对象
let bus =new Vue();
暴露模块
export default bus
b.在A和B组件中分别引入bus.js
import Bus from "@/utils/bus.js"
定义一个方法来传播数据
sendDataFn(){
//将数据广播到Bus上
Bus.$emit("自定义事件名",数据)
}
c.在b组件中通过Bus来接收广播、
Bus.$on("自定义事件名",(data)=>{
console.log(data); //data就是兄弟组件传递的数据
})
*/