vue3 官方文档阅读笔记

深入组件

依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。
想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。
在 Vue 3 中，我们可以使用 Composition API API 的 provide 和 inject 来解决这个问题。
provide() 函数可以为组件后代提供数据

vue

<script setup>
import { provide } from 'vue';

provide(/* 注入名 */ 'message', /* 值 */ 'hello!');
</script>

provide() 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。
第二个参数是提供的值，值可以是任意类型，包括响应式的状态，比如一个 ref。

vue

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

const count = ref(0);
provide('key', count);
</script>

有意思的来了：提供的响应式状态使后代组件可以由此和提供者 建立响应式的联系。

App.vue

vue

<script setup>
import { ref, provide } from 'vue';
import FancyList from './FancyList.vue';
const count = ref(0);
provide('key', count);
</script>

<template>
  <p>{{ count }}</p>
  <FancyList></FancyList>
</template>

FancyList.vue

vue

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

const count = inject('key');
</script>

<template>
  <button @click="() => count++">{{ count }}</button>
</template>

当提供/注入响应式的数据时，建议尽可能将任何对响应式状态的变更都保持在供给方组件中这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其更容易维护。
有的时候，我们可能需要在注入方组件中更改数据。在这种情况下，我们推荐在供给方组件内声明并提供一个更改数据的方法函数

vue

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue';
const location = ref('North Pole');
function updateLocation() {
  location.value = 'South Pole';
}
provide('location', {
  location,
  updateLocation
});
</script>

vue

<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue';
const { location, updateLocation } = inject('location');
</script>
<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

如果你想提供的数据不能被注入方的组件更改，你可以使用 readonly() 来包装提供的值。

vue

<script setup>
import { ref, provide, readonly } from 'vue';
const count = ref(0);
provide('read-only-count', readonly(count));
</script>

vue3 官方文档阅读笔记 ​

深入组件 ​

依赖注入 ​

vue3 官方文档阅读笔记

深入组件

依赖注入