vue组件开发中provide和inject的使用

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. provide 和 inject是一起成对使用的（比如父传子）
2. provide 和 inject的数据传递不是响应式的，如果想让他是响应式，就需要传递的数据是一个可监听的对象。

使用场景： 组件嵌套很深，子组件、孙组件等等情况或者组合组件的开发

使用方法

父组件

// 
<template>
  <div>
    {{ formData }}
    <acc-form></acc-form>
  </div>
</template>

<script>
export default {
// 祖、父组件通过provide向下传递数据
  provide () {
    return {
      CheckboxGroup: this.formData
    }
  },
  data () {
    return {
      formData: {
      }
    }
  }
}
</script>

<style>
</style>

子、孙组件一样

<template>
  <div>
    <el-input v-model="CheckboxGroup.inputVal"></el-input>
    <el-input
      type="textarea"
      class="mt-10"
      v-model="CheckboxGroup.textareaVal"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'AccForm',
  model: {
    prop: 'formData',
    event: 'chenged'
  },
  props: {
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  // 子组件接收注入数据
  inject: {
    CheckboxGroup: {
      default: {}
    }
  }
}
</script>

<style>
</style>

实现效果