vue3之provide的使用

最新推荐文章于 2024-09-23 13:58:44 发布

Bravo-ljq

最新推荐文章于 2024-09-23 13:58:44 发布

阅读量2.3k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/ssssummer/article/details/129955202

版权

文章讲述了在Vue3中，如何在爷孙组件之间传递值，特别是在点击编辑按钮时将表格行的id传递给弹框内的孙子组件。使用的关键技术包括vue3的provide和inject，强调了provide需在setup中使用，注入的值应为响应式的对象。

摘要由CSDN通过智能技术生成

需求： vue3爷孙组件传值
场景：点击编辑按钮，将表格行的id传递给弹框子组件中包含的孙子组件
技术栈： vue3+vite+ant-design-vue3.2.0+ts
yeye组件…

<script lang="ts" setup>
import { ref, provide } from 'vue'
const rowId= ref('')
provide('rowId', rowId)
const  edit = (id: string) => {
	rowId.value = id
}
</script>

sun组件

<script lang="ts" setup>
import { inject } from 'vue'
const rowId: any = inject('rowId')
console.log(rowId.value) // 使用的时候需要.value
</script>

注意：
provide需要写在setup中，不然控制台会报警告。（我一开始用的时候写在了edit方法里面）provide是异步的，所以不用担心会注入一个空值。另外provide(‘rowId’, rowId)不能写成provide(‘rowId’, rowId.value)，provide注入的必须是一个响应式的对象，不然inject的时候取不到值。
以上均为个人理解，如有问题欢迎指出