vue选项之provide和inject

vue选项之provide和inject

参考：https://cn.vuejs.org/v2/api/#provide-inject

 

 

类型：

• provide

Object | () => Object

• inject

Array<string> | {[key: string]: string | Symbol | Object}

 

详细：

provide和inject主要在开发高阶插件/组件库时使用。

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的property

inject选项应该是：

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

 

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

示例：

// 父级组件提供'foo'
var Provider = {
    provide: {
        foo: 'bar'
    },
    // ...
}

// 子组件注入'foo'
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 },
    // ...
}

 

使用一个注入的值作为一个property的默认值：

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

 

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

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

 

通过设置默认值使其变成可选项：

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

 

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

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

 

与prop的默认值类似，你需要对非原始值使用一个工厂方法：

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