Vue2.x组件间通信汇总表

---

分享一篇以前做Vue2.x开发时总结的组件通信汇总

一、组件间通信方式表

序号	方式	使用场景	演示代码	说明
1	props	父=>子(属性传参)	√	接收数据: 子组件中props定义接收;
派发数据: 父组件中绑定数据进行派发
2	emit/emit/emit/on	子=>父组件通信(事件传参)	√	接收数据: 父组件调用$on/v-on;
派发数据: 子组件调用$emit()
3	event bus	兄弟组件通信
跨层级组件通信	√	自定义观察者模式的Bus并挂载到根Vue;
接收数据: 对应组件调用$on;
派发数据: 对应组件调用$emit()
4	$refs	父子组件通信	√	通过$refs获取子节点引用直接操作
5	vuex	兄弟组件通信
跨层级组件通信	×	通过单独文章说明vuex的使用
6	$root	兄弟组件通信	√	接收数据: 对应组件调用根组件的$on()
派发数据: 对应组件调用根组件的$emit()
7	$parent	父子组件通信
兄弟组件通信	√	接收数据: 对应组件调用公共父组件的$on()
派发数据: 对应组件调用公共父组件的$emit()
8	$children	父子组件通信	√	通过$children获取并查找指定子节点后直接操作
9	provide/inject	跨多层级组件通信	√	接收数据: "孙"辈组件通过定义inject获取数据
派发数据: 父组件中通过定义provide设置数据
10	$attrs	父=>孙
(非属性特性传参)	√	场景1
父孙传参
接收数据: 孙辈组件中props定义接收
桥接数据: 子组件中通过v-bind="$attrs"展开
派发数据: 父组件中绑定数据进行派发
场景2
父子传参
接收数据: 子组件中$attrs.xxx获取数据
派发数据: 父组件中绑定数据进行派发
11	$listeners	孙=>父
(事件传参)	√	场景1
孙父传参
接收数据: 父组件调用$on/v-on
桥接数据: 子组件中通过v-bind="$listeners"展开
派发数据: 子组件调用$listeners.xxx()
场景2
子父传参
接收数据: 父组件调用$on/v-on
派发数据: 子组件调用$listeners.xxx()

二、组件间通信演示

1. props

父组件定义数据代码:

data() {
  return {
    data: 'Welcome to Your Vue.js App'
  }
} 

子组件定义props接收数据代码

{{ msg }}

props: {
  msg: {
    type: String,
      default: ''
  },
} 

2. emit&$on

子组件派发事件代码

发送

methods: {
  sendDataToParent() {
    this.$emit("send", "我是子组件");
  },
} 

父组件绑定事件代码v1

methods: {
  childSend(value) {
    console.log('value :>> ', value);
  }
} 

父组件绑定事件代码v2

mounted() {
	this.$refs.child1.$on("send", (value) => {
  	console.log("parent received value is :>> ", value);
	});
} 

3. eventbus

自定义bus代码:

/* eslint-disable no-unused-vars */
class Bus {
    constructor() {
        this.callbacks = {}
    }

    on(name, fn) {
        this.callbacks[name] = this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }

    emit(name,args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(callback => {
                callback(args)
            });
        }
    }
}
module.exports = Bus 

子组件1发送数据代码:

发送

 

子组件2接收数据代码:

export default {
  name: "Child2",
  mounted() {
    this.$bus.on("send", (value) => {
      console.log("value :>> ", value);
    });
  },
}; 

公共父组件代码:

4. $refs

父组件调用子组件函数/设置数据/获取数据代码:

mounted() {
  // ** 注意组件挂载顺序
  // 获取子组件data数据
  console.log("this.$refs.child1.msg :>> ", this.$refs.child1.msg);
  // 修改子组件data数据
  this.$refs.child1.msg = "parent modify data";
  // 调用子组件函数
  this.$refs.child1.console("hello");
} 

子组件代码:

5. $parent

子组件1通过$parent发送数据代码:

发送

methods: {
  sendDataToChild2() {
    this.$parent.$emit("send", "我是子组件1");
  },
} 

子组件2通过$parent接收数据代码:

mounted () {
  this.$parent.$on('send',(value)=>{
    console.log('child2 received value is :>> ', value);
  })
} 

公共父组件代码:

6. $children

父组件调用子组件函数/设置数据/获取数据代码:

mounted () {
  console.log('this.$children :>> ', this.$children);
  const children = this.$children[0]
  if(children.$vnode.data.ref === "child1"){
    console.log('children.msg :>> ', children.msg);
    children.message('hello')
  }
} 

子组件代码:

7. root(同root(同root(同parent)

// 发送修改为
this.$root.$emit("send", "我是子组件1");

// 接收修改为
this.$root.$on('send',(value)=>{
  console.log('child2 received value is :>> ', value);
}) 

8. provide&inject

父组件设置provide代码

export default {
  provide() {
    return { msg: "hello vue" };
  },
  components: {
    Child,
  },
}; 

子组件配置孙辈组件代码

export default {
  components: {
    Grandson,
  },
}; 

孙辈组件通过inject获取数据代码

export default {
    inject: ['msg'],
}; 

9. $attrs属性传参

案例1(父=>子传参):

1. 父组件传递数据代码:

2. 子组件接收数据代码:

{{$attrs.value}}
 

案例2(父=>孙传参,子桥接):

1. 父组件传递数据代码:

2. 子组件桥接属性代码:

3. 孙辈组件通过props属性接收数据代码:

{{ value }}

props: {
  value: {
    type: String,
    default: "",
  },
}, 

10. $listeners事件传参

案例1(子=>父传参)

1. 子组件派发事件代码:

发送

send() {
  this.$listeners.event('hello vue')
} 

3. 父组件绑定事件接收数据代码:

  
message(value) {
  console.log('value :>> ', value);
} 

案例2(孙=>父传参,子桥接)

1. 孙辈组件派发事件代码:

发送

this.$emit("event", "hello vue"); 

2. 子组件桥接事件代码:

3. 父组件绑定事件接收数据代码:

  
message(value) {
  console.log('value :>> ', value);
} 

---