vue3-组件传值2（Provide和Inject ）

1、Provide (提供)

• 要为组件后代提供数据，需要使用到 provide()函数：
• 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol

import { ref, provide } from 'vue'
const count = ref(0)
const name = ref('你好')
provide('key', count)
provide('name', name)

应用层 Provide

• 在应用级别提供的数据所有组件中都可以注入。
• 这在你编写插件时会特别有用，因为插件一般都不会使用组件形式来提供值。
• 也可用这个导入注入全局方法。

import { createApp } from 'vue'
const app = createApp({})
let used = {}
app.provide('used', used)

2、Inject (注入)

• 要注入上层组件提供的数据，需使用 inject() 函数：
• 如果提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。

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

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

• 如果没有使用 <script setup>，inject() 需要在 setup() 内同步调用，记得返回

import { inject } from 'vue'
export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}

注入默认值

• 默认情况下，inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供，则会抛出一个运行时警告。

// 如果没有祖先组件提供 "message"
// `value` 会是 "这是默认值"
const value = inject('message', '这是默认值')

和响应式数据配合使用

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

<!-- 在供给方组件内 -->
<script setup>
import { provide, ref } from 'vue'

const location = ref('North Pole')

function updateLocation() {
  location.value = 'South Pole'
}

provide('location', {
  location,
  updateLocation
})
</script>

<!-- 在注入方组件 -->
<script setup>
import { inject } from 'vue'

const { location, updateLocation } = inject('location')
</script>

<template>
  <button @click="updateLocation">{{ location }}</button>
</template>

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

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

const count = ref(0)
provide('read-only-count', readonly(count))
</script>