网站编辑心得体会萧山做网站公司

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉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>

总结：

• 使用 provide 提供数据，使用 inject 注入数据。

  • 可以传递数据（使用数据），可以传递函数（修改数据）