vue之provide和inject跨組件傳遞屬性值失敗（父組件向子組件傳值的兩種方式）

簡單介紹：當一個子組件需要用到父組件的父組件的某些參數。那么這個時候為了避免組件重復傳參，使用vue的依賴注入是個不錯的方法，直接在最外層組件設置一個
provide，內部不管多少嵌套都可以直接取到最外層的參數。

provide/inject可實現跨組件傳值，數據的流只能是向下傳遞，其中父組件provide，子組件inject。provide : 必須在父組件進行使用，用來給后代組件注入依賴
（屬性或方法）inject :  必須
在子組件進行使用，用來獲取根組件定義的要跨組件傳遞的數據

但是要注意一個問題：父組件通過provide/inject向子組件傳遞屬性值時有可能失敗

1、父組件通過provide/inject向子組件傳遞方法不會有問題
父組件：先引入子組件，再注冊子組件，provide作為一個方法給子組件注入方法

<script>
import mappingMmDict from './mappingMmDict'
export default {
  components: {
    mappingMmDict
  }
provide() {
    return {
      getMm: this.getMm
    }
  }
}
</script>

子組件：注入屬性或方法，inject后面用一個數組接收，使用屬性或方法

<script>
  export default {
    inject: ["getMm"],
  handleSelect(row) {
        ...
        this.getMm(row.mmNo,this.id);
  },
</script>

 2、父組件通過provide/inject向子組件傳遞常量也不會有問題

provide() {
    return {
        "username": "周文豪"
    }
  }

inject: ["username"],

<el-form-item label="文化程度：">
              <el-radio-group v-model="addForm.eduLevel">
                <el-radio v-for="item in getEduLevelList()" :key="item.dictTypeId" :label=item.dictId>{{item.dictName+username}}</el-radio>
              </el-radio-group>
            </el-form-item>

3、父組件通過provide/inject向子組件傳遞從后台獲取的數據就無法傳遞，此時只能將數據通過方法包裝起來實現傳遞

父組件代碼如下：

data () {
  return {
      isMedicareList: []
  }
},

methods: {
    getIsMedicareList(){
          return this.isMedicareList
    },
} 
provide() {
  return {
    getIsMedicareList: this.getIsMedicareList
  }
}

子組件代碼：

inject: ["getIsMedicareList"],

<el-form-item label="是否有醫保：">
   <el-radio-group v-model="addForm.isMedicare">
      <el-radio v-for="item in getIsMedicareList()" :key="item.dictId" :label=item.dictId>{{item.dictName}}</el-radio>
   </el-radio-group>
</el-form-item>            

 父組件向子組件傳遞屬性值時建議：通過父組件綁定自定義屬性，然后在子組件中通過props來接收的方式。

父組件代碼如下：

<node-addAndEdit ref="addAndEdit" :eduLevelList="eduLevelList" />

子組件代碼如下：

props: ["eduLevelList"],