介紹Provide以及Inject

介紹 Vue 的 Provide 以及 Inject

Provide 以及 Inject 是 Vue 中用於祖先元素向其全部後臺元素注入依賴的接口。

具體用法

// Data.vue
...
export default {
  provide: {
    setData: 'setData'
  },
  methods: {
    setdata() {
      //Something
    }
  }
};

// DataItem.vue
...
export default {
  inject: ['setData'],
  created() {
    this.setdata();
  }
};

<template>
  <data>
    <data-item></data-item>
  </data>
</template>

• 注意：經過 Inject 得到的屬性是不可響應的。

項目中實際應用

在項目中，如須要兩個基礎組件的父子組件進行通訊，又不想寫太多業務無關代碼，就能夠使用 Provide 以及 Inject。

例如：

<app>
  <app-header></app-header> <!-- 在App中開啓header的顯示 -->
  <app-navigation></app-navigation> <!-- 在App中開啓navigation的顯示 -->
  ...
  <app-footer></app-footer><!-- 在App中開啓footer的顯示 -->
</app>

僅須要簡單的調用組件，而不須要傳遞 Prop 的值以及定義 Slot。

固然也能夠使用一個全局對象實現，使用 Provide 以及 Inject 好處是可多頁面複用以及較爲簡單。

若是需求比較複雜，仍是使用一個全局的 Vue 對象或 Vuex 更好。