【Vue3】组件通信之$parent
- 背景
- 简介
- 开发环境
- 开发步骤及源码
- 总结
背景
随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用 $parent 实现子组件向父组件传数据。
Vue3 中组件间通信包括：
- 父组件向子组件传数据，实现方案有：
propsv-model$ref- 默认插槽 / 具名插槽
- 子组件向父组件传数据
propsv-model$parent- 自定义事件
- 作用域插槽
- 父组件向子组件的子组件传数据，即向孙子组件传数据
$attrsprovider&inject
- 任意组件间传数据
mittPinia
开发环境
| 分类 | 名称 | 版本 |
|---|---|---|
| 操作系统 | 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/。
每点击一次子组件中的 借书 按钮，父组件中图书列表便会删除列表中第一本图书。
总结
使用 $parent 实现子组件向父组件传数据，首先需要父组件使用 defineExpose 函数将数据提供给子组件，defineExpose 函数是一个对象，由向子组件提供的数据组成，然后子组件使用 $parent 获取对父组件的引用，并进一步实现向父组件传数据。
