Provide/Inject的基本使用

1、简单介绍

  • 从功能上来讲,他类似props的传值,provide提供,inject接收;

  • 有了props为什么还需要这东西?因为如果是传值给孙子props就没那么方便了,如果是传给孙子的孙子呢,那就更麻烦了,一级一级传太恶心;

  • 简单一点理解:

    Provide:我只是将数据抛出去,爱谁用谁用;

    Inject:我只是需要这个值,谁给都行;

2、使用说明

  • provide通过对象或函数返回对象的方式将数据提供出来;

  • provide提供出来的数据不支持响应式;

  • inject通过字符串数组的方式注册使用或通过对象的方式

    {
      key: {
          from: 'provide中的key',
          default: '初始值'
      }
    }
    
  • 可以使用ES6中的Symbol做为健,但inject中注册时需要使用对象的方式;

2.1、简单使用

provide 通过对象提供值

provide: {
  message: "Message from grandfather",
},

inject 通过字符串数组接收

inject: ["message"],

Grandfather.vue

<template>
  <div class="container">
    GrandFather
    <father />
  </div>
</template>
<script>
import Father from "./Father.vue";
export default {
  name: "GrandFather",
  provide: {
    message: "Message from grandfather",
  },
  components: { Father },
};
</script>
<style lang="scss" scoped>
</style>

Father.vue

<template>
  <div class="container">
    Father
    <son />
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  name: "Father",
  components: { Son },
};
</script>
<style lang="scss" scoped>
</style>

Son.vue

<template>
  <div class="container">Message: {{ message }}</div>
</template>
<script>
export default {
  name: "Son",
  inject: ["message"],
};
</script>
<style lang="scss" scoped>
</style>

运行结果:

GrandFather
Father
Message: Message from grandfather

2.2、高级使用

provide通过函数返回对象的方式提供值

provide() {
    return {
      [Symbol.for("message")]: this.message,
    };
},

inject通过对象方式接收

inject: {
    // 本地使用的属性名
    message: {
      from: Symbol.for("message"), // inject中接收的名字
      default: "Default message", // 如果没有则使用default中的值
    },
},

使用Symbol做为传递的健

GrandFather.vue

<template>
  <div class="container">
    GrandFather
    <father />
  </div>
</template>
<script>
import Father from "./Father.vue";
export default {
  name: "GrandFather",
  provide() {
    return {
      [Symbol.for("message")]: this.message,
    };
  },
  data() {
    return {
      message: "Message from GrandFather use Symbol",
    };
  },
  components: { Father },
};
</script>
<style lang="scss" scoped>
</style>

Father.vue

<template>
  <div class="container">
    Father
    <son />
  </div>
</template>
<script>
import Son from "./Son.vue";
export default {
  name: "Father",
  components: { Son },
};
</script>
<style lang="scss" scoped>
</style>

Son.vue

<template>
  <div class="container">Message: {{ message }}</div>
</template>
<script>
export default {
  name: "Son",
  inject: {
    // 本地使用的属性名
    message: {
      from: Symbol.for("message"), // inject中接收的名字
      default: "Default message", // 如果没有则使用default中的值
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

执行结果:

GrandFather
Father
Message: Message from GrandFather use Symbol

发表评论