【Vue3】组件通信之$parent

背景
简介
开发环境
开发步骤及源码
总结

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中如何使用 $parent 实现子组件向父组件传数据。

Vue3 中组件间通信包括：

父组件向子组件传数据，实现方案有：
- props
- v-model
- $ref
- 默认插槽 / 具名插槽
子组件向父组件传数据
- props
- v-model
- $parent
- 自定义事件
- 作用域插槽
父组件向子组件的子组件传数据，即向孙子组件传数据
- $attrs
- provider & inject
任意组件间传数据
- mitt
- Pinia

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 创建 Vue3 工程，参考：【Vue3】工程创建及目录说明。

2> 删除 src 目录下 assets 和 components 目录。

3> 修改 src 目录下 main.ts。

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

4> 修改 Vue 根组件 src/App.vue，使用 defineExpose 函数向子组件提供数据。

<template><div class="parent"><h2>图书馆</h2><div class="books"><div class="book" v-for="book in books" :key="book.id"><h3>书名：{{ book.title }}</h3><h3>作者：{{ book.author }}</h3></div></div><Reader /></div>
</template><script setup lang="ts">
import Reader from './components/Reader.vue'
import { reactive } from 'vue'const books = reactive([{ id: '001', title: '长安的离职', author: '马伯庸'},{ id: '001', title: '坐天下', author: '张宏杰'},{ id: '001', title: '饥饿的盛世', author: '张宏杰'},{ id: '001', title: '风起陇西', author: '马伯庸'},
])// 向子组件提供数据
defineExpose({ books })
</script><style scoped lang="scss">
.parent {background-color: orange;padding: 20px;.books {display: flex;margin-bottom: 20px;.book {background-color: white;border: 1px solid blue;margin-right: 10px;padding: 0 10px;width: 300px;}}
}
</style>

注意：需要执行 npm install -D sass 命令安装 CSS 预处理器。

5> 定义子组件，使用 $parent 获取父组件引用。

<template><div class="content"><h2>读者：{{ name }}</h2><button @click="borrow($parent)">借书</button></div>
</template><script setup lang="ts">
import { ref } from 'vue'const name = ref('小七')
function borrow(parent: {[key: string]: any} | null) {if (parent != null) {parent.books.shift()}
}
</script><style scoped lang="scss">
.content {background-color: greenyellow;padding: 20px;button {font-size: 18px;font-weight: bold;height: 40px;margin-bottom: 10px;margin-right: 10px;width: 150px;}
}
</style>

注意：$parent 获取父组件引用可能为 null，所以示例代码中对 null 做了特殊处理。

6> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/。
在这里插入图片描述
每点击一次子组件中的 借书 按钮，父组件中图书列表便会删除列表中第一本图书。