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"],