浅析
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
定义说明：这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
通俗的说就是：组件得引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情。
provide：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。
一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。
在组合式API中的用法
基本用法
似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。
顶级组件：
|
|
<template> <div> <son /> </div> </template> <script setup> import son from "./son.vue"; import { provide } from "vue"; provide("abc", "123"); </script> |
子组件：
|
|
<template> <div> <grandson /> </div> </template> <script setup> import grandson from "./grandson.vue"; </script> |
孙组件：
|
|
<template> <div>我是孙子</div> </template> <script setup> import { inject } from "vue"; const abc = inject("abc"); console.log(abc); </script> |
官方说：
inject() can only be used inside setup() or functional components.
这个意思是说，inject()只能放在setup()生命周期里运行，不能放在别的周期里运行，也不能放在事件周期里运行。所以你可以先在setup()周期取值。
例一：这是允许的，因为console.log是setup()生命周期里的同步代码
|
|
function xx() { console.log(inject("abc")) } xx() |
例三：让例一的xx函数作为鼠标事件回调，也是禁止的，原因也一样。
例四：放在Promise.then()也是禁止的，比如：
|
|
Promise.resolve().then(() => { console.log(inject("abc")) }) |
一级组件修改数据，孙子组件监听变更
provide的变量必须是响应式变量，孙子组件监听的变量也必须是响应式变量。
一级组件：
|
|
<template> <div> <son /> <button @click="abc = '456'">{{ abc }}</button> </div> </template> <script setup> import son from "./son.vue"; import { provide } from "vue"; ref: abc = "123"; provide("abc", $abc); </script> |
孙子组件：
|
|
<template> <div>我是孙子 - {{abc}}</div> </template> <script setup> import { inject, watch } from "vue"; ref: abc = inject("abc"); watch($abc, () => { console.log(abc + '变了'); }); </script> |
孙子组件修改数据，一级组件监听变更
一级组件除了提供数据，还要提供一个修改数据的方法，孙子组件要接收并使用这个方法，这样修改的就是一级组件的数据，修改之后又会影响孙子组件的数据。
一级组件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div> <son /> <button @click="abc = '456'">{{ abc }}</button> </div> </template> <script setup> import son from "./son.vue"; import { provide } from "vue"; ref: abc = "123"; function updateAbc(val) { abc = val; } provide("abc", $abc); provide("updateAbc", updateAbc); </script> |
孙子组件：
|
|
<template> <div @click="updateAbc('789')">我是孙子 - {{abc}}</div> </template> <script setup> import { inject, watch } from "vue"; ref: abc = inject("abc"); const updateAbc = inject('updateAbc'); watch($abc, () => { console.log(abc + '变了'); }); </script> |
禁止孙子组件修改一级组件的数据
禁止的话，一级组件传递的变量必须是只读的，可以是readonly，也可以是shallowRef。这样孙子组件修改数据的话，一级组件不会有反应。
一级组件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div> <son /> <button @click="abc = '456'">{{ abc }}</button> </div> </template> <script setup> import son from "./son.vue"; import { shallowRef, provide } from "vue"; let abc = shallowRef("123"); function updateAbc(val) { abc = val; } provide("abc", abc); provide("updateAbc", updateAbc); </script> |
在配置项式API中的用法
跟Vue 2差不多，简单说一下。
provide
provide语法比在组合式API里要灵活，毕竟可以用对象。比如：
|
|
provide: { user: 'John Doe', }, |
如果要把data里的数据provide，说白了就是打算用this，provide要写成函数：
|
|
provide() { return { user: this.user, updateUser: this.updateUser } }, |
如果要提供计算属性，也是一样的道理，不过，如果不打算用配置项式计算属性，而是想用vue的computed方法
可以写成：
|
|
provide() { return { userLength: computed(() => this.user.length), updateUser: this.updateUser } }, |
inject
inject的用法更简单，比如inject: ['user', 'updateUser']。
双向修改而且响应 想要双向修改而且响应，就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据，才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性，才能得到真正需要的数据。
可以看到，由于孙子组件的inject和computed的属性不能重名，所以我造出一个abcabc变量名，这就比较麻烦了。我们再看组合式API，就没有abcabc这种中间变量，原因是ref: abc = inject("abc");让接收和加响应式一气呵成，这也是组合式API的优势之一。
一级组件：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<template> <div> <son /> <button @click="abc = '456'">{{ abc }}</button> </div> </template> <script> import son from "./son.vue"; import { ref, shallowRef, computed, provide } from "vue"; export default { components: { son, }, data() { return { abc: 123, } }, provide() { return { abcabc: computed(() => this.abc), updateAbc: this.updateAbc } }, methods: { updateAbc(val) { this.abc = val; } } } </script> |
孙子组件：
|
|
<template> <div @click="updateAbc('789')">我是孙子 - {{ abc }}</div> </template> <script> import { unref } from "vue"; export default { inject: ["abcabc", "updateAbc"], computed: { abc() { return unref(this.abcabc); }, }, }; </script> |
参考链接
vue3的provide和inject