当前位置：首页 > news >正文

组合API-provide和inject函数

news 来源：原创 2025/5/29 13:12:17

个人简介

👨‍💻‍个人主页：魔术师
📖学习方向：主攻前端方向，正逐渐往全栈发展
🚴个人状态：研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流严禁用于商业用途，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

14-组合API-provide和inject函数

掌握：通过 provide 和 inject 函数实现跨级组件通讯

大致内容：

后代组件 使用 祖先组件的数据，祖传后
后代组件 修改 祖先组件的数据，后传祖

具体落地：

祖先传递后代
- provide 和 inject 从 vue 中导入
- provide('数据名称', 响应式数据) 提供数据的祖先组件使用
- const data = inject('数据名称') 注入数据的后代组件使用

祖先组件

<template><div class="app"><p>祖先组件</p><p>姓名：{{ students.name }}</p><p>年龄：{{ students.age }}</p><hr /><Parent /></div>
</template><script>
import Parent from '@/components/parent.vue'
import { reactive, provide } from 'vue'
export default {name: 'App',components: { Parent },setup() {const students = reactive({ name: '张三疯', age: 199 })provide('students.age', students.age)return { students }}
}
</script>

父级组件

<template><div><p>父级组件</p><hr /><son></son></div>
</template>
<script>
import son from '@/components/son.vue'
export default {name: 'parentA',components: { son }
}
</script>
<style lang=""></style>

子级组件

<template><div><p>子级组件</p><p>注入数据的后代组件使用:{{ data }}</p></div>
</template>
<script>
import { inject } from 'vue'
export default {name: 'sonB',// 注入祖先组件提供的数据setup() {const data = inject('students.age')return { data }}
}
</script>
<style lang=""></style>

后代传递祖先

provide('数据名称', 修改函数) 提供函数的祖先组件使用
const changeMoney = inject('数据名称') 注入函数的后代组件使用
遵循：数据由谁定义，由谁修改。

祖先组件

<template><div class="app"><p>祖先组件</p><p>姓名：{{ students.name }}</p><p>年龄：{{ students.age }}</p><hr /><Parent /></div>
</template><script>
import Parent from '@/components/parent.vue'
import { reactive, provide } from 'vue'
export default {name: 'App',components: { Parent },setup() {const students = reactive({ name: '张三疯', age: 199 })// 提供数据给后代provide('students.age', students.age)// 提供函数给后代provide('change', () => {students.age -= 99})return { students }}
}
</script>

子级组件

<template><div><p>子级组件</p><p>注入数据的后代组件使用:{{ data }}</p><button @click="change">子级组件age</button></div>
</template>
<script>
import { inject } from 'vue'
export default {name: 'sonB',// 注入祖先组件提供的数据setup() {const data = inject('students.age')// 注入祖先组件提供的函数const change = inject('change')return { data, change }}
}
</script>
<style lang=""></style>