vue 入门二-13.依赖注入

• Provide (提供)

要为组件后代提供数据，需要使用到 provide() 函数。
第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。第二个参数是提供的值，值可以是任意类型，包括响应式的状态。

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

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

一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。

• 应用层 Provide
  编写插件时会特别有用

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

• Inject (注入)
  如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值

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

const message = inject('message')
</script>

• 和响应式数据配合使用
  当提供 / 注入响应式的数据时，建议尽可能将任何对响应式状态的变更都保持在供给方组件中。