Vue项目组件间通信总结-CFANZ编程社区

一；通过给组件绑定自定义事件实现子向父传递参数

1.首先在父组件当中给子组件绑定自定义事件

2.在子组件中，通过 this.$emit ( '自定义事件名' ，要传递的数据) 进行子组件中数据的传递

3.在父组件中的methods中书写自定义事件函数，函数中的形参用来接收子组件传递过来的数据，在函数体中进行数据的处理

// 这是父组件中的子组件标签
<SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/>

// 在子组件标签中向父组件传递数据
 methods: {
    // 点击品牌的事件
    handelTrademark(trademark){
      // 通过$emit绑定事件，注意事件名要与给子组件标签中的自定义事件名字一致
      this.$emit('trademarkInfo',trademark)
    },
    // 通过$emit绑定事件，注意事件名要与给子组件标签中的自定义事件名字一致
    attrInfo(attr,attrValue){
      this.$emit('attrInfo',attr,attrValue)
    }
  },

// 父组件中触发子组件自定义事件

// trademarkInfo自定义事件的回调
trademarkInfo(trademark){
      console.log('父组件',trademark);
      this.searchParams.trademark = `${trademark.tmId}:${trademark.tmName}`
      this.getSearchData()
    },
// attrInfo 自定义事件---收集平台属性的标签
    attrInfo(attr,attrValue){
      console.log(attr,attrValue);
      // 整理参数格式
      let props =`${attr.attrId}:${attrValue}:${attr.attrName}`
      // 数组去重
      if(this.searchParams.props.indexOf(props)==-1){
        this.searchParams.props.push(props)
      }
      // 发送请求
      this.getSearchData()
    }

二：通过全局事件总线实现兄弟间传值

1.在 main.js 入口文件部署 $bus 全局事件总线

new Vue({
  render: h => h(App),
  // 注册路由--此时组件身上拥有$router和$route属性
  router,
  // 注册仓库-- 此时组件身上拥有$store属性
  store,
  // 全局事件总线配置
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
}).$mount('#app')

2.在需要传递参数的组件中通过 this.$bus.$emit ( ' 自定义事件名 ' ，传递的数据 ) 来创建一个全局事件总线事件

3.在兄弟组件中需要处理这个数据的位置通过 this.$bus.$on('自定义事件名'，回调函数) 来处理这个数据

// 传递数据的兄弟组件

// 触发删除关键字时传递这个关键字数据给另一个组件
    removeKeyword(){
      // 给服务器带的参数searchParams的keyword置空
      this.searchParams.keyWord = undefined

      // 再次发请求----这个请求感觉没必要发，监听路由的时候就会发
      this.getSearchData()

      // 通知兄弟组件Header清空输入框关键字
      this.$bus.$emit('clear')

      // 进行路由跳转 去除掉params参数
      this.$router.push({
        name:'search',
        query:this.$route.query
      })
    },

// 接收数据的兄弟组件

  mounted() {
    this.$bus.$on("clear", () => {
      this.keyWord = "";
    });
  },