Vue.js provide用法及代码示例

提供可以由后代组件注入的值。

类型

interface ComponentOptions {
  provide?: object | ((this: ComponentPublicInstance) => object)
}

细节：

provide 和 inject 一起使用以允许祖先组件充当其所有后代的依赖注入器，无论组件层次结构有多深，只要它们位于同一父链中。

provide 选项应该是对象或返回对象的函数。此对象包含可用于注入其后代的属性。您可以在此对象中使用符号作为键。

示例

基本用法：

const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}

使用函数提供per-component 状态：

export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}

请注意，在上面的示例中，提供的 msg 不会是反应式的。有关详细信息，请参阅Working with Reactivity。

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 provide。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。