vue常用组件通信方式总结

最近在vue2开发项目中，遇到一个常见的场景就是不同组件之间的通信和传参，现整理如下：

父组件=》子组件

props属性

  父组件
  <de-attack-list :attack_list="attack_ranking.ranking_list" ></de-attack-list>
  
  子组件
  export default {
    name: "DeAttackList",
    props: {
      attack_list: {  定义attack_list属性
        type: Array,
        default() {
          return [];
        },
      },
    },
  };

$attrs特性

   父组件
   <de-top-list title="攻击排名"></de-top-list>
   
   子组件
   <div>{{$attrs.title}}</div>  不需要定义直接使用

refs引用

  父组件--在父组件中修改子组件的内容
  <de-top-list ref='top_list'></de-top-list>
  mounted(){
      this.$refs.top_list.name = 'attack'
    }
   
  子组件
    name: "DeTopList",
    data(){
      return {
        name: ''
      }
    },

$children

  父组件
  <div class="attack-list">
      <de-top-list name="攻击排名" ref='top_list'></de-top-list>
  </div>
  
  mounted(){
      this.$children[0].name = 'attack'; 在父组件中通过$children修改子元素属性
    }
   
  子组件
    name: "DeTopList",
    data(){
      return {
        name: ''
      }
    },

子组件=》父组件

emit

  子组件
  name: "DOffenceDefencePie",
  this.$emit("active_line", line_object);
  
  父组件
   <d-offence-defence-pie
      @active_line="update_attack_targets"    父组件接收
      :offence_defence_data="offence_defence_data">
   </d-offence-defence-pie>

兄弟组件

依赖共同祖辈组件；采用 $parent或者$ root

$parent

子组件1
name: "DOffenceDefencePie",
this.$parent.$emit("active_line", line_object);

子组件2
name: "DeOffenceDefenceUnit",
this.$parent.$on('active_line', (line_object)=>{
    this.update(line_object);
})

父组件
<div>子组件1
    <d-offence-defence-pie :offence_defence_data="offence_defence_data"></d-offence-defence-pie>
</div>
<div>子组件2
   <de-offence-defence-unit :attack_target="attack_targets"></de-offence-defence-unit>
</div>

$root 类似$ parent使用方式

祖组件=》后代孙组件

对于这种嵌套层级较多的场景，vue提供了provide/inject机制来支持；

provide/inject

能实现祖先组件给所有后代组件传值

  祖组件
    name: "Defense",
    provide(){
      return {
      init_params: getYearStartEnd(),
      }
    },
  
  孙组件
    name: "DeTopList",
    inject:['init_params'],
    
    <p>{{init_params}}</p>

任意两个组件之间

任意两个组件之间的通信有两种方式：事件总线或者VUEX

事件总线

创建一个Bus类负责事件派发、监听、回调管理；方式是在需要通信的组件之间，都引入一个新的vue实例，通过实例的事件触发和监听实现通信和参数传递。

eventBus.js
import Vue from 'vue'
const eventBus = new Vue()
export { eventBus }

组件1
EventBus.$emit('defense_params', {params: this.params})


组件2
EventBus.$on('defense_params',(params)=>{
      console.log('on defense_params:', params)
    })

eventBus.$off();配合使用避免重复消息

vuex

一般大型项目中建议使用vuex来进行管理。

vue-router

path和query组合传参

  this.$router.push({
            path: "/scan_otp_update",
            query: {
              QRcode: this.QRcode,
              code: this.code,
              device_type: this.device_type
            }
          });
  this.$route.query.QRcode; ----获取参数

name和params组合传参

  this.$router.push({
            name: "scan_otp_update",
            params: {
              QRcode: this.QRcode,
              code: this.code,
              device_type: this.device_type
            }
          });
  this.$route.params.QRcode; ----获取参数

总结：

参数的传递是开发中很常见的场景，以上是目前vue支持的几种通信方式，每种方式都有比较适合的场景，可以在项目中依据实际的需要采用不同的通信方式达到通信的效果。

vue2常用组件通信方式总结