vue3 inject 用法

在 Vue3 中，inject 和 provide 是用于父组件向子组件传递数据的新方式，它们可以取代 props 和 $emit，用于更深层次的组件通信。

inject 用于在子组件中接收父组件提供的数据，它的用法如下：

1. 在父组件中使用 provide 提供数据，可以是一个对象或者一个函数返回一个对象：

// Parent.vue
import { provide } from 'vue';

export default {
  setup() {
    const data = 'Hello, World!';
    provide('data', data);
  }
}

2. 在子组件中使用 inject 接收父组件提供的数据，可以是一个数组或者一个对象：

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const data = inject('data');
    console.log(data); // Hello, World!
  }
}

注意，如果父组件中没有提供对应的数据，inject 会查找父组件的父组件，直到找到为止。

另外，inject 还可以指定默认值，当查找不到对应的数据时，将返回默认值：

// Child.vue
import { inject } from 'vue';

export default {
  setup() {
    const data = inject('data', 'default value');
    console.log(data); // default value
  }
}