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

巴特西

vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）

最新文章

热门文章