Vue 的provide 和 inject 提供和注入

祖先提供东西，后代注入东西

vue2 中 provide / inject

provide ：是一个对象，里面是属性和值。 在使用 data 内的数据时，需要将 provide 转换成返回对象的函数。

provide() {
    return {
        themeName: this.themeName,
        changeTheme: this.changeTheme, // 如果不生效，刷新一下 codesandbox
        changeFontSize: this.changeFontSize
    }
}

inject ：是一个字符串数组

inject: ["themeName", "changeTheme", "changeFontSize"]

实例

vue2-官方文档

vue3 中 provide / inject

在组合式 API 中使用 provide/inject，两个只能在 setup 期间调用，使用之前，必须从 vue 显示导入 provide/inject 方法。

provide 函数接收两个参数：

provide( name,value )

• name：定义提供 property 的 name 。
• value ：property 的值。

import { provide } from "vue"

export default {

  setup(){

    provide('info',"值")

  }
}

inject 函数有两个参数：

inject(name,default)

• name：接收 provide 提供的属性名。
• default：设置默认值，可以不写，是可选参数。

import { inject } from "vue"

export default {

  setup(){

    inject('info',"设置默认值")

  }

}

我们也可以通过 ref 和 reactive 进行传递。

App.vue

<template>
    <Demo />
    {{ info.age }}
</template>

<script>
import Demo from "./components/Demo.vue";
import { reactive, ref, provide } from "vue"
export default {
    name: "App",
    components: {
    Demo: Demo,
},
setup() {
    const info = reactive({ name: "zcc", age: 18 });
    const code = ref("set");
    provide("info", info);
    provide("code", code);
    return {
        info,
        code,
    };
  },
};
</script>

Demo.vue

<template>
    <h1>{{ info.name }}</h1>
    <h1>{{ info.age }}</h1>
    <h1>{{ code }}</h1>
    <button @click="changeAge">点击修改年龄</button>
</template>

<script>
import { inject } from "vue";
export default {
setup() {
    let info = inject("info");
    let code = inject("code");
    const changeAge = () => {
     info.age++;
    };
    return {
     info,
     code,

    };
},
};

</script>>

hopeful-sunset-fmfvi3 - CodeSandbox

Demo组件可以直接修改App组件通过provide传递过去的数据

但是在一些情况下，我们是不允许的，此时我们可以采用readonly来进行设置。

如果我们确实希望改变父组件的数据，此时我们可以在父组件中设置方法，通过provide将该方法传递给子组件，保证数据是数据提供的位置进行修改。

 const info = reactive({ name: "zcc", age: 18 });
 const code = ref("set");
 const changeAge = () => {
     info.age++;
 };
    provide("info", info);
    provide("code", code);
    provide("changeAge",changeAge)

  let info = inject("info");
  let code = inject("code");
  let changeAge = inject("changeAge");
  return {
     info,
     code,
     changeAge,
  };