Vue.js教程
7.7.4 provide / inject
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

全局配置

全局API

选项 / 数据

选项 / DOM

选项 / 生命周期钩子

选项 / 资源

选项 / 组合

extends

mixins

parent

provide / inject

2.2.0 新增

  • 类型:
    • provide:Object | () => Object
    • inject:Array<string> | { [key: string]: string | Symbol | Object }
  • 详细:

    provideinject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 SymbolReflect.ownKeys 的环境下可工作。

    inject 选项应该是:

    • 一个字符串数组,或
    • 一个对象,对象的 key 是本地的绑定名,value 是:
      • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
      • 一个对象,该对象的:
        • name 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
        • default 属性是降级情况下使用的 value

    提示:provideinject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

  • 示例:
    var Provider = {
    provide: {
    foo: 'bar'
    },
    // ...
    }

    var Child = {
    inject: ['foo'],
    created () {
    console.log(this.foo) // => "bar"
    }
    // ...
    }

    利用 ES2015 Symbols、函数 provide 和对象 inject

    const s = Symbol()

    const Provider = {
    provide () {
    return {
    [s]: 'foo'
    }
    }
    }

    const Child = {
    inject: { s },
    // ...
    }

    接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 propsdata 初始化之后得到。

    使用一个注入的值作为一个属性的默认值:

    const Child = {
    inject: ['foo'],
    props: {
    bar: {
    default () {
    return this.foo
    }
    }
    }
    }

    使用一个注入的值作为数据入口:

    const Child = {
    inject: ['foo'],
    data () {
    return {
    bar: this.foo
    }
    }
    }

    在 2.5.0+ 的注入可以通过设置默认值使其变成可选项:

    const Child = {
    inject: {
    foo: { default: 'foo' }
    }
    }

    如果它需要从一个不同名字的属性注入,则使用 from 来表示其源属性:

    const Child = {
    inject: {
    foo: {
    from: 'bar',
    default: 'foo'
    }
    }
    }

    对于 prop 的默认值来说是类似的,你需要对非原始值使用一个工厂方法:

    const Child = {
    inject: {
    foo: {
    from: 'bar',
    default: () => [1, 2, 3]
    }
    }
    }

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验