1.main.js 中创建一个总线挂载到vue实例原型上，利用Vue实例作为中央事件总线，来触发和监听事件。实现父子、兄弟、跨级之间的通信

Vue.prototype.$bus = new Vue()

2.发送信息的组件用$emit方法,需要传入2个参数，参数一：传递的名字，参数二：传递的数据

this.$bus.$emit("sendImg", data);

3.接收参数的组件 用$on方法来接收，传入参数2个，接受参数名字，参数二：回调函数

 this.$bus.$on('sendImg',(val)=>{
            console.log(val)
        })

总结： 创建一个中央事件总线挂到vue原型上， 这个名称可以自定义，一般都是$bus，然后传递的时候，通过$emit方法，接收的时候通过$on方法。

1.定义子组件 MyButton.vue 用$emit方法传递 里面2个值，参数一：挂载到自定义组件上的函数名，第二个是要传递的值

this.$emit("axxx", data)

<template>
    <div>
        <button @click="btn">按钮</button>
    </div>
</template>

<script>
export default {
    data: () => ({
        data: "子传父"
    }),
    methods: {
        btn() {
            this.$emit("axxx", data)
        }
    }

}
</script>

2.父组件接收

在父组件上自定义函数名

<template>
    <div>
        <mybutton @axxx="goto"/>
    </div>
</template>

<script>
export default {
    data: () => ({
        data: "子传父"
    }),
    methods: {
        goto(val) {
            console.log(val);
        },

}
</script>

@自定义函数名 = "自定义的函数" 这里挂在的什么函数名，子组件传递的时候，就要写什么函数名，"="是自定义的函数，可以通过回调来接收传递的参数

方法一：

1.定义一个公共组件 MyButton.vue

<template>
    <div>
        <button :class="color">{{ name }}</button>
    </div>
</template>

<script>
export default {
    props: ["name", "color"]
}
</script>

<style lang="scss" scoped>
.seagreen {
    background-color: seagreen;
    color: #fff;
    border: 0;
    padding: 5px 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
}

.salmon {
    background-color: salmon;
    color: #acebe2;
    border: 0;
    padding: 5px 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
}
</style>

prop 接收的参数

props: ["name", "color"]

子组件接收的地方

<button :class="color">{{ name }}</button>

2.父组件传递参数

            <mybutton name="注册" color="seagreen" />

            <mybutton name="登录" color="salmon" />

效果图：

方法二：（严格模式）

子组件

    props: {
        name: {
            type: String,
            default: "默认按钮"
        },
        color: {
            type: String,
            default: "seagreen"
        }
    },

name，color 表示传递的名称 name:{}里面表示传递的对象的类型和默认值 如果类型不符合就会报错，如果不传递一个值，就会给默认值。

如下示例，父组件操作）

            <mybutton name="注册" color="seagreen" />

            <mybutton />

            <mybutton name="登录" color="salmon" />

效果图

第一个按钮都是传递了参数值，并且类型也是符合的，所以没有报错，第二个按钮没有传递任何值，所以显示了一个默认值

打包之前需要在 vue.config.js 配置如下

  assetsDir: 'static',     //  outputDir的静态资源(js、css、img、fonts)目录
   publicPath: './',   // 静态资源路径（默认/，如果不改打包后会白屏）

<template>
    <div class="layout">
        <router-view />
        <div class="navbar_bottom">
            <ul>
                <li @click="to(v, i)" v-for="(v, i) in tab" :key="i" :class="{ active: active === i }">{{ v.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data: () => ({
        tab: [
            { name: "首页", to: '/layout/index' },
            { name: "运动", to: '/' },
            { name: "圈子", to: '/' },
            { name: "我的", to: '/' },
        ],
        active: 0
    }),
    methods: {
        to(v, i) {
            console.log(v, i);
            this.$router.push(v.to)
            this.active = i
        }
    }
}
</script>

<style lang="scss" scoped>
.layout {
    height: 100%;
    background-color: rgb(0, 121, 177);

    .navbar_bottom {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;

        ul {
            width: 100%;
            height: 100%;
            display: flex;
            font-size: 16px;
            justify-content: space-around;
            align-items: center;

            li {
                &.active {
                    color: #00d1ec;
                }
            }
        }
    }

}
</style>

方法一：query 浏览器地址传递参数（页面刷新参数依然保留）

传递参数

this.$router.push({
path:'/info', //路径名
query:v //接收的参数
})

接收参数

this.$route.query

方法二：params （页面刷新参数就销毁）

传递参数

this.$router.push({
    name:'info',//路径name名
    params:v,//参数，多个参数可以用 { v,v2}
})

接收参数

this.$route.params

方法三：动态参数（在路由地址上面添加一个变量）

path: '/index/:a'

传递参数

<router-link to="/index/abc">首页</router-link>

接收参数

this.$route.params

接收到的参数：abc

附图：

一.localStorage：本地存储

提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留

将data保存到localStorage(本地存储)

方法一：

localStorage.setItem("data", data)

方法二:

localStorage.data=data

从localStorage中获取data数据

方法一：

localStorage.getItem("data")

方法二：

localStorage.data

二.sessionStorage：会话存储

提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除

将data保存到sessionStorage(会话存储)

方法一：

sessionStorage.setItem("data", data)

方法二:

sessionStorage.data = data

从localStorage中获取data数据

方法一：

sessionStorage.getItem("data")

方法二：

sessionStorage.data

三:一些常用的方法

1.清空存储中的所有key

localStorage.clear()

2.清空key中的参数

localStorage.removeItem("data")

功能：点击提交清空表单值

数据结构

            form: {
                name: "",//名称
                img: '',//图片地址
                price: 0,//单价
                num: 0,//数量
                sel: false,
            },

点击事件

this.list.push(this.form)

数据存储

list: []

当点击时候吧表单的信息添加到数据存储list数组，然后清空表单

this.form={}

清空之后没有考虑到有个复选框sel属性的状态，sel的状态是true，或者false，如果清空之后就为空，push到数组里面就没有这个属性，丢失了，

解决办法：提交之后给sel重新添加一个false状态

this.form.sel=false