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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。