Vue 中跨组件层级的依赖注入

在 Vue 应用中，我们经常利用provide和inject实现跨组件层级的依赖注入，它们在Options API和Composition API两种不同的组件编写方式中会存在一些差异。

Options API

1. 在父组件中通过provide“提供”一个值

<script>
export default {
  name: 'ParentComponent',
  provide() {
    params: this.userInfo
  },
  data() {
    return {
      userInfo: {}
    }
  },
  mounted() {
    setTimeout(() => {
      this.userInfo = {
        name: '张三',
        age: '40',
        sex: '男'
      }
    }, 0)
  }
}
</script>

2. 在子组件中通过inject“注入”一个值

<script>
export default {
  name: 'SubComponent',
  inject: {
    params: {
      default: () => ({})
    }
  },
  watch: {
    params: {
      handler(val) {
        console.log(val);
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

Composition API

1. 在父组件中通过provide“提供”一个值

<script setup>
import { ref, reactive, provide, onMounted } from 'vue';

const userInfo = ref({});
const userInfo2 = ref({});

onMounted(() => {
  setTimeout(() => {
    userInfo.value = {
      name: '张三',
      age: '40',
      sex: '男'
    }
    
    userInfo2.name = '李四';
    userInfo2.age = '18';
    userInfo2.sex = '女';
  }, 0)
})

provide('params', userInfo);
provide('params2', userInfo2);
</script>

2. 在子组件中通过inject“注入”一个值

<script setup>
import { inject, watch } from 'vue';

const params = inject('params', {});
const params2 = inject('params2', {});

watch(() => params.value, (val) => {
  console.log(val);
})

watch(() => params2, (val) => {
  console.log(val);
})
</script>

tips

1. 当使用 provide 来提供由 ref 创建的响应式对象时，通过 Options API 注入该对象可以直接访问其值，而通过 Composition API 注入该对象则需要通过 .value 属性来访问；
2. 当使用 provide 来提供由 reactive 创建的响应式对象时，不可以对该对象进行重新赋值，只可以对该对象的属性进行赋值。