sph---自定义事件与全局事件总线

1. 自定义事件（子给父传递数据）

        在父组件中，给子组件绑定自定义事件trademarkInfo

        在子组件中触发trademarkInfo事件：this.$emit('trademarkInfo'，传递的数据)

        自定义事件一触发，父组件中就执行相应的回调函数trademarkInfo

//子组件
<script>
    export default {
        name: "SearchSelector",
        methods: {
            // 品牌的事件处理函数
            trademarkHandler(trademark) {
                // 点击品牌，还是需要整理参数，向服务器发请求，获取相应数据进行展示
                // 此时，需要在父组件(Search)中进行发请求，因为带给服务器的参数searchParams在父组件中
                // 子组件把相应的品牌信息传递给父组件，用自定义事件
                this.$emit("trademarkInfo", trademark);
            },
        },
    };
</script>

//父组件
<template>
    <div>
         <SearchSelector @trademarkInfo="trademarkInfo" />
    </div>
</template>

<script>
    //引入子组件
    import SearchSelector from "./SearchSelector";
    export default {
        name: "Search",
        components: {
            SearchSelector,
        },
        data() {
            return {
                // 带给服务器的参数
                searchParams: {
                    // 一级分类id
                    category1Id: "",
                    // 二级分类id
                    category2Id: "",
                    // 三级分类id
                    category3Id: "",
                    // 分类名字
                    categoryName: "",
                    // 搜索关键字
                    keyword: "",
                    // 品牌
                    trademark: "",
                },
            };
        },
        methods: {
            // 发请求，获取search模块数据(根据参数不同，返回不同数据)
            // 把这次请求封装为一个函数，在需要的时候调用即可
            getSearchData() {
                // 派发action  通知Vuex发请求，获取搜索模块的数据，存储在仓库中
                this.$store.dispatch("getSearchList", this.searchParams);
            },
            // 自定义事件回调
            trademarkInfo(trademark) {
                // 整合带给服务器的品牌字段参数   "ID:品牌名称"
                this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`;
                // 再次向服务器发请求，获取search模块相应数据进行展示
                this.getSearchData();
            },
        },
    };
</script>

2. 全局事件总线（$bus）-----实现任意组件间通信

        提供数据的组件（触发自定义事件）：this.$bus.$emit('事件名'，数据)

        得到数据的组件（给$bus绑定自定义事件）：this.$bus.$on('事件名'，回调) ， 回调函数写在monted()里面的话，回调用箭头函数。

        首先在main.js中配置全局事件总线

new Vue({
  render: h => h(App),
  // 注册路由,对象的简写形式(KV一致省略V),注意router是小写的
  router,
  // 注册仓库：每个组件实例身上都拥有一个$store属性
  store,
  // 配置全局事件总线$bus
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

提供数据的组件（触发 clearKeyword 事件）：

// 全局事件总线，通知兄弟组件Header清除搜索框中的关键字
this.$bus.$emit("clearKeyword");

接收数据的组件（给$bus 绑定 clearKeyword 事件，事件的回调留在自身）:

mounted() {
            // 全局事件总线  清除搜索框中的关键字
            this.$bus.$on("clearKeyword", () => {
                this.keyword = "";
            });
        },