0
点赞
收藏
分享

微信扫一扫

Vue2.x组件间通信汇总表



Dear,大家好,我是“前端小鑫同学”,长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~


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

一、组件间通信方式表

序号

方式

使用场景

演示代码

说明

1

props

父=>子(属性传参)


接收数据: 子组件中​​props​​定义接收;

派发数据: 父组件中绑定数据进行派发

2

Vue2.x组件间通信汇总表_数据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

父组件定义数据代码:
<Child :msg="data"/>

data() {
return {
data: 'Welcome to Your Vue.js App'
}
}
子组件定义props接收数据代码
<h1>{{ msg }}</h1>

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

2. emit&$on

子组件派发事件代码
<button @click="sendDataToParent">发送</button>

methods: {
sendDataToParent() {
this.$emit("send", "我是子组件");
},
}
父组件绑定事件代码v1
<Child @send="childSend($event)" />

methods: {
childSend(value) {
console.log('value :>> ', value);
}
}
父组件绑定事件代码v2
<Child ref="child1" />

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发送数据代码:
<button @click="send">发送</button>

<script>
export default {
name: "Child",
methods: {
send() {
this.$bus.emit("send", "我是子组件1");
},
},
};
</script>
子组件2接收数据代码:
export default {
name: "Child2",
mounted() {
this.$bus.on("send", (value) => {
console.log("value :>> ", value);
});
},
};
公共父组件代码:
<template>
<div>
<Child />
<Child2 />
</div>
</template>

4. $refs

父组件调用子组件函数/设置数据/获取数据代码:
<Child ref="child1" />

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");
}
子组件代码:
<template>
<div ref="c1" class="hello">
{{ msg }}
</div>
</template>

<script>
export default {
name: "Child",
data() {
return {
msg: "I'm child.",
};
},
mounted() {
console.log("child msg :>> ", this.msg);
},
methods: {
console(value) {
console.log("parent value is :>> ", value);
},
},
};
</script>

5. $parent

子组件1通过$parent发送数据代码:
<button @click="sendDataToChild2">发送</button>

methods: {
sendDataToChild2() {
this.$parent.$emit("send", "我是子组件1");
},
}
子组件2通过$parent接收数据代码:
mounted () {
this.$parent.$on('send',(value)=>{
console.log('child2 received value is :>> ', value);
})
}
公共父组件代码:
<template>
<div ref="app">
<Child />
<Child2 />
</div>
</template>

6. $children

父组件调用子组件函数/设置数据/获取数据代码:
<Child ref="child1" />

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')
}
}
子组件代码:
<template>
<div ref="c1" class="hello">
</div>
</template>

<script>
export default {
name: "Child",
data() {
return {
msg: "hello vue",
};
},
methods: {
message(value) {
console.log("value :>> ", value);
},
},
};
</script>

7. Vue2.x组件间通信汇总表_前端_02parent)

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

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

8. provide&inject

父组件设置provide代码
<Child />

export default {
provide() {
return { msg: "hello vue" };
},
components: {
Child,
},
};
子组件配置孙辈组件代码
<Grandson></Grandson>

export default {
components: {
Grandson,
},
};
孙辈组件通过inject获取数据代码
export default {
inject: ['msg'],
};

9. $attrs属性传参

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

1. 父组件传递数据代码:
<Child value="Hello Vue" />
2. 子组件接收数据代码:
<!--非属性特性-为在props中定义-->
<div>{{$attrs.value}}</div>

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

1. 父组件传递数据代码:
<Child value="Hello Vue" />
2. 子组件桥接属性代码:
<!--非属性特性-为在props中定义-->
<!--利用$attrs展开语法跨层级多参数传递-->
<Grandson v-bind="$attrs"></Grandson>
3. 孙辈组件通过props属性接收数据代码:
<div>{{ value }}</div>

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

10. $listeners事件传参

案例1(子=>父传参)

1. 子组件派发事件代码:
<button @click="send">发送</button>

send() {
this.$listeners.event('hello vue')
}
3. 父组件绑定事件接收数据代码:
<Child @event="message" />

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

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

1. 孙辈组件派发事件代码:
<button @click="send">发送</button>

this.$emit("event", "hello vue");
2. 子组件桥接事件代码:
<!--利用$listeners展开语法跨层级多参数传递-->
<Grandson v-on="$listeners"></Grandson>
3. 父组件绑定事件接收数据代码:
<Child @event="message" />

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

欢迎关注我的公众号“前端小鑫同学”,原创技术文章第一时间推送。

举报

相关推荐

0 条评论