vue中组件间通讯的8种方法（父传子、子传父、ref、Bus、Vuex、$attrs / $listeners、provide / inject API、$parent / $children
其实在 Vue 的学习中，遵循着二八法则，我们常用的 20% 的 API 就能解决大部分日常问题，剩余的 API 感觉用处不大。但是，抽点时间去了解那些冷门的 API，也许你能发现一些不一般的风景
下面有8种组件间通讯方法，代码中都写了注释哦，文章总结有代码下载链接
根据项目实际情况，使用最佳的方法，能令你，事半功倍
1、父传子
子组件通过props接收父组件传来的数据
最佳使用场景，数据简单，状态单一，优先使用，优先级 > 后6种方法
父组件
<template>
<div id="parent">
<!-- 把父组件的name传递给子组件 -->
<child :name="name"></child>
</div>
</template>
<script>
// 引入子组件
import Child from './child'
export default {
components: {
Child },
data() {
return {
name: '张三',
}
},
}
</script>
子组件
<template>
<div id="child">{
{
name }}</div>
</template>
<script>
export default {
props: {
name: String, // 通过props，接受父组件传来的string类型的name
},
}
</script>
2、子传父
父组件传递自定义方法给子组件，子组件通过$emit调用父组件传来的方法
最佳使用场景，数据简单，状态单一，优先使用；优先级 > 后6种方法
父组件
<template>
<div id="parent">
<!-- 把父组件的自定义changeName方法传递给子组件 -->
<child @changeName="changeName"></child>
</div>
</template>
<script>
// 引入子组件
import Child from './child'
export default {
components: {
Child },
methods: {
// 父组件传给子组件的方法
changeName(newName) {
console.log(newName) // '李四'；当子组件点击修改姓名时，触发
},
},
}
</script>
子组件
<template>
<div id="child">
<p>{
{
userInfo.name }}</p>
<button @click="changeUserInfo('李四')">修改姓名</button>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: '张三',
},
}
},
methods: {
// 点击修改姓名时调用
changeUserInfo(newName) {
this.userInfo.name = newName
// 调用父组件传给子组件的自定义changeName方法
// 触发父组件所对应的changeName方法，把用户新的名字使用参数传递
this.$emit('changeName', newName)
},
},
}
</script>
3、兄弟间传值(vue bus)
利用中央事件总线，vue bus，通俗来讲就是利用创建空的vue实例，进行传值
最佳使用场景：组件不多，管理的状态、数据简单、状态(数据)没变化依旧触发时，优先选用bus，而不是选用，使用起来更麻烦的vuex；优先级bus > vuex
父组件
<template>
<div id="parent">
<child1></child1>
<child2></child2>
</div>
</template>
<script>
// 引入子组件Child1、Child2，两为兄弟组件
import Child1 from './child1'
import Child2 from './child2'
export default {
components: {
Child1, Child2 },
}
</script>
bus.js
// vue-bus数据总线机制，兄弟组件间通信
import Vue from 'vue'
// 使用 Event Bus，创建全局空的Vue实例：bus
const bus = new Vue()
export default bus
子组件(child1)
<template>
<div id="child1">child1</div>
</template>
<script>
// 引入bus vue空实例对象，兄弟间通信
import bus from '@/utils/bus'
export default {
created() {
// 组件初始化 创建changeName方法 至bus vue空实例对象里
// 触发时，自动调用$on的第二个参数 回调方法，并接收newName参数
bus.$on('changeName', (newName) => {
console.log(newName) // '李四'；当兄弟组件child2点击修改姓名时，触发
})
},
}
</script>
子组件(child2)
<template>
<div id="child2">
<p>{
{
userInfo.name }}</p>
<button @click="changeUserInfo('李四')">修改姓名</button>
</div>
</template>
<script>
// 引入bus vue空实例对象，兄弟间通信
import bus from '@/utils/bus'
export default {
data() {
return {
userInfo: {
name: '张三',
},
}
},
methods: {
// 点击修改姓名时调用
changeUserInfo(newName) {
this.userInfo.name = newName
// 调用bus vue空实例对象中的child1创建的changeName方法
// 并把用户新的名字使用参数传递
bus.$emit('changeName', newName)
},
},
}
</script>
4、ref
父组件通过ref获取子组件的vue实例对象
最佳使用场景：父组件直接操作子组件数据、方法时；如：在父组件里清空(重置)子组件的数据
父组件
<template>
<div id="parent">
<!-- 绑定子组件ref，可获取子组件的vue实例对象 -->
<child ref="child"></child>
<button @click="getUserInfo">获取用户信息</button>
</div>
</template>
<script>
// 引入子组件
import Child from './child'
export default {
components: {
Child },
methods: {
// 点击获取用户信息按钮，调用
getUserInfo() {
// 获取child组件实例
// 可以获取、修改child中的data数据，也可以调用child组件中的方法
// 使用了对象解构赋值，下面一行代码同等于
// const child = this.$refs.child
const {
child } = this.$refs // 同等于child子组件的this
console.log(child.userInfo.name) // '张三'；当点击获取用户信息时，触发
},
},
}
</script>
子组件
<template>
<div id="child">{
{
userInfo.name }}</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
name: '张三',
},
}
},
}
</script>
5、父链 / 子链($parent / $children)
父组件通过$parent/$children获取组件的vue实例对象
优点：可直接操作父、子组件的数据、方法，可快速、便捷操作
缺点：会简化两个深度耦合的组件，不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性，代码可读性会减弱
父组件
<template>
<div id="parent">
<p>{
{
parentUserInfo.name }}</p>
<button @click="getChildUserInfo">获取子组件用户信息</button>
<child></child>
</div>
</template>
<script>
// 引入子组件
import Child from './child'
export default {
components: {
Child },
data() {
return {
parentUserInfo: {
name: '张三爹',
},
}
},
methods: {
// 点击获取子组件用户信息按钮，调用
getChildUserInfo() {
// 获取child组件实例
// 可以获取、修改child中的data数据，也可以调用child组件中的方法
// 可能有多个子组件，所以获取到的是，由多个子组件实例对象组成的数组
const childrenArr = this.$children
// 第一项才是 组件名为Child的组件
const child = childrenArr[0] // 同等于child父组件的this
console.log(child.childUserInfo.name) // '张三'；当点击获取用户信息时，触发
},
},
}
</script>
子组件
<template>
<div id="child">
<p>{
{
childUserInfo.name }}</p>
<button @click="getParentUserInfo">获取父组件用户信息</button>
</div>
</template>
<script>
export default {
data() {
return {
childUserInfo: {
name: '张三',
},
}
},
methods: {
// 点击获取父组件用户信息按钮，调用
getParentUserInfo() {
// 获取parent组件实例
// 可以获取、修改parent中的data数据，也可以调用parent组件中的方法
// 父组件是唯一的，所以直接获取到parent父组件实例对象
const parent = this.$parent // 同等于parent子组件的this
console.log(parent.parentUserInfo.name) // '张三爹'；当点击获取父组件用户信息时，触发
},
},
}
</script>
6、Vuex
集中式状态管理模式，Vuex 的状态管理存储是响应式的，可以集中式存储管理应用的所有状态
最佳使用场景：组件嵌套深，组件量多；全局状态数据
优点：状态统一管理，可维护性高
缺点：修改状态时，但状态未更改时，不会触发，这时应使用bus
父组件
<template>
<div id="parent">
<child1></child1>
<child2></child2>
</div>
</template>
<script>
// 引入子组件Child1、Child2，两为兄弟组件
import Child1 from './child1'
import Child2 from './child2'
export default {
components: {
Child1, Child2 },
}
</script>
main.js(入口文件引入、挂载store)
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
store/index.js(vuex文件)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userInfo: {
name: '张三',
},
},
mutations: {
// 修改用户姓名
changeUserInfo(state, data) {
state.userInfo.name = data
},
},
actions: {
},
modules: {
},
})
子组件(child1)
<template>
<div id="child1">
<p>{
{
userInfo.name }}</p>
<button @click="changeUserInfo('李四')">child1修改姓名</button>
</div>
</template>
<script>
export default {
computed: {
userInfo() {
return this.$store.state.userInfo
},
},
methods: {
// 点击修改姓名时调用
changeUserInfo(newName) {
this.userInfo.name = newName
this.$store.commit('changeUserInfo', newName)
},
},
}
</script>
子组件(child2)
<template>
<div id="child2">
<p>{
{
userInfo.name }}</p>
<button @click="changeUserInfo('王五')">child2修改姓名</button>
</div>
</template>
<script>
export default {
computed: {
userInfo() {
return this.$store.state.userInfo
},
},
methods: {
// 点击修改姓名时调用
changeUserInfo(newName) {
this.userInfo.name = newName
this.$store.commit('changeUserInfo', newName)
},
},
}
</script>
7、$ attrs/$ listeners
子组件通过$attrs/$listeners获取父组件传递的数据和方法
最佳使用场景：父、子孙组件通讯
父组件
<template>
<div id="parent">
<button @click="changeName('李四')">修改姓名</button>
<!-- 把父组件的name传递给子组件 -->
<!-- 把父组件的changeName方法，子组件通过$listeners获取方法 -->
<child :name="name" v-on="{ changeName }"></child>
</div>
</template>
<script>
// 引入子组件Child
import Child from './child'
export default {
components: {
Child },
data() {
return {
name: '张三',
}
},
methods: {
// 修改姓名，并传递给子组件、子孙组件使用，用$listeners获取方法
changeName(newName) {
this.name = newName
console.log(this.name)
},
},
}
</script>
子组件
<template>
<div id="child">
<p>子组件：{
{
$attrs.name }}</p>
<button @click="changeName('王五')">子组件-修改姓名</button>
<!-- v-bind="$attrs"：把父组件所绑定传递过来的name，再次传递给子孙组件 -->
<!-- v-on="$listeners"：把父组件所绑定传递过来的方法changeName，再次传递给子孙组件 -->
<child-child v-bind="$attrs" v-on="$listeners"></child-child>
</div>
</template>
<script>
import ChildChild from './child-child'
export default {
components: {
ChildChild },
inheritAttrs: false, // 是否显示元素上的属性，默认为true: 显示
methods: {
// 修改姓名
changeName(newName) {
// 通过$listeners调用父组件传来的changeName方法
this.$listeners.changeName(newName)
},
},
}
</script>
子孙组件
<template>
<div id="child-child">
<p>子孙组件：{
{
$attrs.name }}</p>
<button @click="changeName('吴六')">子孙组件-修改姓名</button>
</div>
</template>
<script>
export default {
inheritAttrs: true, // 是否显示元素上的属性，默认为true: 显示
methods: {
// 修改姓名
changeName(newName) {
// 通过$listeners调用父组件传来的changeName方法
this.$listeners.changeName(newName)
},
},
}
</script>
8、provide / inject API
父路由、父组件通过provide提供给子路由、子组件数据、方法
子路由、子组件，通过inject注入父路由、父组件所提供的数据、方法
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的，因为对象在内存中保存的是一个地址。
根组件(App.vue)
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template>
<script>
export default {
data() {
return {
isRouterAlive: true,
}
},
// 父组件中返回要传给下级的数据
provide() {
return {
reload: this.reload, // 把reload方法传递给子组件、子路由
}
},
methods: {
reload() {
console.log('正在刷新组件...')
this.isRouterAlive = false
this.$nextTick(() => {
console.log('正在渲染dom...')
this.isRouterAlive = true
this.$nextTick(() => {
console.log('dom渲染完成')
})
})
},
},
}
</script>
父组件
<template>
<div id="parent">
<child></child>
</div>
</template>
<script>
// 引入子组件Child
import Child from './child'
export default {
components: {
Child },
data() {
return {
name: '张三',
}
},
provide() {
return {
name: this.name, // 把name传递给子组件、子路由
}
},
}
</script>
子组件
<template>
<div id="child">
<p>子组件：{
{
name }}</p>
<button @click="childReload">child刷新组件</button>
<child-child></child-child>
</div>
</template>
<script>
import ChildChild from './child-child'
export default {
components: {
ChildChild },
inject: ['name', 'reload'],
created() {
console.log(this.name) // '张三'；获取父组件parent通过provide提供的name数据
},
methods: {
// 刷新组件
childReload() {
// 获取根组件App通过provide提供的reload方法
// 调用根组件reload()方法
this.reload()
},
},
}
</script>
子孙组件
<template>
<div id="child-child">
<p>子孙组件：{
{
name }}</p>
<button @click="childReload">child-child刷新组件</button>
</div>
</template>
<script>
export default {
inject: ['name', 'reload'],
created() {
console.log(this.name) // '张三'；获取父组件parent通过provide提供的name数据
},
methods: {
// 刷新组件
childReload() {
// 获取根组件App通过provide提供的reload方法
// 调用根组件reload()方法
this.reload()
},
},
}
</script>
总结
1、父子通信：
①父传子
②子传父
③ref
④Bus
⑤Vuex
⑥$attrs / $listeners
⑦provide / inject API
⑧父链 / 子链($parent / $children)
2、兄弟通信
①Bus
②Vuex
3、跨级通信
①Bus
②Vuex
③ref
④$attrs / $listeners
⑤provide / inject API
⑥父链 / 子链($parent / $children)
代码下载：https://gitee.com/staraliang/vue-component-communication.git