vue3 如何使用provide

Vue 3 中使用 provide 和 inject 进行组件之间的数据传递。provide 可以在父组件中提供数据，然后子组件通过 inject 来注入这些数据。

首先，在父组件中使用 provide 来提供数据，可以是一个对象或者一个函数返回一个对象。例如：

// 父组件
import { provide } from 'vue';

export default {
  setup() {
    const data = 'Hello, Vue 3!';
    
    provide('message', data);
    
    // 或者提供一个函数来返回对象
    // provide('message', () => ({ data }));
  }
}

然后，在子组件中使用 inject 来接收提供的数据。例如：

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    
    // 或者通过默认值提供一个函数来接收数据
    // const message = inject('message', () => ({ data: 'default message' }));
    
    console.log(message); // 输出 'Hello, Vue 3!'
  }
}

注意：provide 和 inject 绑定是基于组件的关系，并且只能在 setup 函数中使用。确保提供和注入的键名是字符串或 Symbol 类型。