Provide/Inject的基本使用

Leave a reply

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

Leave a Reply