组件间通信方式汇总表

2023-09-18 06:58:18

沟通是架起组件联系的桥梁

许多人都使用Vue.js开发前端应用，而Vue.js中的组件间通信是开发中非常重要的一环。本文汇总了Vue2.x组件间通信的几种方式，以及每种方式的使用场景和示例代码，希望能够帮助大家快速理解和掌握这些通信方式。

序号	方式	使用场景	演示代码
1	props	父组件向子组件传递数据	父组件：`<my-component :data="data" />`，子组件：`<template><div>{{ data }}</div></template>`
2	events	子组件向父组件传递数据	子组件：`this.$emit('my-event', data)`，父组件：`<my-component @my-event="handleEvent" />`
3	provide/inject	祖先组件向后代组件传递数据	祖先组件：`provide() { return { data: 'foo' } }`，后代组件：`inject(['data'])`
4	refs	获取组件实例	父组件：`<my-component ref="myComponent" />`，父组件：`this.$refs.myComponent.data`
5	$attrs	父组件向子组件传递非props数据	父组件：`<my-component :attrs="{ data: 'foo' }" />`，子组件：`<template><div>{{ $attrs.data }}</div></template>`
6	$listeners	父组件向子组件传递事件监听器	父组件：`<my-component @click="handleClick" />`，子组件：`<template><div @click="$listeners.click"></div></template>`
7	slot	子组件向父组件传递内容	父组件：`<my-component><template v-slot:default><div>Hello world!</div></template></my-component>`，子组件：`<template><slot /></template>`
8	global event bus	组件之间进行全局通信	父组件：`this.$root.$emit('my-event', data)`，子组件：`this.$root.$on('my-event', handleEvent)`