前端路线--Vue（day06）

父组件、子组件、兄弟组件间的数据传递笔记

/* 
设置项目的自启动：
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就是兄弟组件传递的数据
        })
*/

目录解析