Vue3 组件传值 之 Provide 和 Inject

Vue3 组件传值 之 Provide 和 Inject

---

一、使用场景

适用于当需要通信的组件属于【祖先】h和【后代】关系时，如下图(引用官网)关系所示。

二、使用步骤

1.由【祖先】提供（provide）数据

方式一：Vue3 <script setup> 写法：

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

provide(/* 自定义数据名 */ 'key1', /* 数据内容 */ '祖先提供的数据')
</script>

方式二：如果不使用 <script setup>，请确保 provide() 是在 setup() 同步调用的

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 自定义数据名 */ 'key1', /* 数据内容 */ '祖先提供的数据')
  }
}

注意 1： 如果提供的数据本身是 响应式状态，比如一个 ref，则 提供的 响应式状态 使【后代】组件可以由此和提供者建立响应式的联系。例如：

import { ref, provide } from 'vue'

const count = ref(0)
provide('key1', count)

**注意 2：除了在一个组件中提供依赖，我们还可以在整个应用层面提供依赖：例如：

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 自定义数据名 */ 'key1', /* 数据内容 */ '祖先提供的数据')

2.在【后代】组件中 注册（inject）使用数据

方式一：Vue3 <script setup> 写法：

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

const message = inject('key1', /*第二个参数是 默认值，可选*/ 'default_value')
</script>

方式二：如果不使用 <script setup>，请确保inject() 是在 setup() 同步调用的

import { inject } from 'vue'

export default {
  setup() {
    const message = inject('key1', /*第二个参数是 默认值，可选*/ 'default_value')
    return { message }
  }
}

三、与 响应式数据 配合使用

注意：当 提供的数据为 响应式的数据 时，建议尽可能将任何对 响应式状态 的变更都保持在供给方（provide）组件中。这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其 更容易维护。

有的时候，我们可能需要在注入方组件中更改数据。在这种情况下，我们推荐在供给方组件内声明并提供一个更改数据的方法函数：

- - 在供给方【provide】组件内 - -

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

// 响应式数据
const msg = ref('提供原始数据信息')

// 更新响应式数据的 方法
function updateMsg() {
  msg.value = '更新的数据信息'
}

// 将 响应式数据 和 更新方法 一同 提供出去
provide('msg', {
  msg,
  updateMsg
})
</script>

- - 在注入方【inject】组件内 - -

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

// 注册 提供的数据 及 相应的更新方法，而不是在当前组件直接修改 注册的 响应式数据
const { msg, updateMsg} = inject('msg')
</script>

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