Vue项目组件间通信总结

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

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 自定义事件---收集平台属性的