vue Provide/inject传值方法

简介:

vue中父子页面可以使用props，emit进行传值，但在组件关系较为复杂时，这样的方法并不实用。

还有一种主要为高阶插件/组件库提供的用例办法，即provide/inject，这对选项需要一起使用。

使用的方法很简单，祖先节点使用provide注入数据，子级节点使用inject注入数据。并在上下游关系存在的时间内始终生效。

 

缺点：

　　在项目中，一般我们追求清晰的数据流向和层级关系，而这一对选项支持任意层级的访问，不知道哪一层级声明了provide，哪一层级使用了inject，造成组件间关系混乱。

　　除组件库或高阶插件外，Vue建议用Vuex解决或其他办法处理。

 

 使用办法

• provide 提供变量：Object | () => Object
• inject 注入变量： Array<string> | { [key: string]: string | Symbol | Object }

  provide 选项应该是一个对象或返回一个对象的函数。 该对象包含可注入其子孙的属性。在该对象中，它支持ES6中Symbol作为key，但只在原生支持等环境下可工作。

  inject 选项可以是

• 一个字符串数组
• 一个对象，key为本地绑定名，value为：
  • 在可用的注入内容中搜索用的key，或
  • 一个对象，其 from 属性是在可用的注入内容中搜索用的key，default属性是降级情况下使用的value

提示：provide和inject绑定并不是可响应的，这是刻意为之，然而如果你传入了一个可监听的对象，那么气对象的属性还是可监听的。

示例：

父组件中
<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>
<script>
  import Son from "./son"
  export default {
    name: 'Father',
    components: { Son },
    // provide选项提供变量
    provide: {
      message: 'provided by father'
    },
    data () {
      return {
        title: '父组件'
      }
    },
    methods: { ... }
  }
</script>

在子组件中，我们故意不使用任何父组件的信息

<template>
  <div>
    <p>{{ title }}</p>
    <grand-son></grand-son>
  </div>
</template>
<script>
import grandSon from "./grandSon "
export default {
  name: "Son",
  components: { grandSon },
  data () {
    return {
      title: '子组件'
    }
  },
};
</script>

在孙组件中，使用inject来注入

<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

结果孙组件页面显示：
message: provided by father