vue3 script setup 中 provide inject 写法

在 Vue3 的 script setup 中，可以通过 provide 和 inject 来实现组件之间的数据传递。

provide 和 inject 的写法如下：

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

const foo = 'hello world'

provide('foo', foo)

const bar = inject('foo')
</script>

在上面的例子中，我们使用 provide 来提供一个名为 'foo' 的变量，值为 'hello world'。然后使用 inject 来获取 'foo' 的值，将其赋值给变量 'bar'。

需要注意的是，provide 和 inject 的第一个参数必须是字符串类型，用于标识提供的变量或方法的名称。在使用 inject 获取值时，如果提供的名称不存在，会返回 undefined。

另外，provide 和 inject 还支持使用一个对象来提供或获取多个变量或方法。具体写法如下：

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

const config = {
  foo: 'hello world',
  bar: () => console.log('hello')
}

provide('config', config)

const { foo, bar } = inject('config')
</script>

在上面的例子中，我们将多个变量或方法放在一个名为 'config' 的对象中，然后使用对象解构语法来获取这些变量或方法。