Vue.js Vue 3 – inject()只能在setup或函数式组件中使用

在本文中，我们将介绍Vue 3中的新特性inject()。这是一个非常有用的函数，但是需要注意的是，它只能在setup()函数或函数式组件中使用。

什么是inject()函数？

在Vue.js中，子组件可以通过props属性接收父组件传递的数据。但是，当应用变得更加复杂时，可能需要在更深层次的组件之间传递数据。为了解决这个问题，Vue 3引入了inject()函数。

inject()函数允许子组件在不通过props传递的情况下获取父组件中提供的数据。它基本上是一个依赖注入的功能，类似于React的Context API。

如何使用inject()函数？

在Vue 3中，我们可以通过在父组件中提供数据，并在子组件中使用inject()函数来获取这些数据。

首先，在父组件中，我们使用provide()函数来提供数据。例如：

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

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

在上面的代码中，我们使用provide()函数提供了一个名为”data”的数据。

然后，在子组件中，我们可以使用inject()函数来获取这个数据。例如：

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

export default {
  setup() {
    const data = inject('data');
    console.log(data); // 输出：Hello, from parent component!
  }
}

在上面的代码中，我们使用inject()函数获取了父组件提供的数据，并将其赋值给变量”data”。

需要注意的是，inject()函数的参数是提供数据的键，而不是数据本身。在这个例子中，我们传递了字符串”data”作为参数。

在setup()函数中使用inject()

除了在子组件中使用inject()函数，我们还可以在setup()函数中使用它。

例如，我们可以在setup()函数中使用inject()函数来获取父组件提供的数据，并将其作为响应式对象返回。这样，我们可以在模板中直接使用这个数据。

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

export default {
  setup() {
    const data = inject('data');
    const reactiveData = reactive({ data });

    return {
      reactiveData
    }
  }
}

在上面的代码中，我们使用reactive()函数将父组件提供的数据转换为响应式对象，并将其作为setup()函数的返回值。然后，我们可以在模板中直接使用这个响应式对象。

函数式组件中使用inject()

除了在setup()函数中使用inject()函数之外，我们还可以在函数式组件中使用它。

函数式组件是一种不需要响应式数据、不需要实例的组件。在Vue 3中，我们可以使用函数式组件来提高性能。

// 函数式组件
import { inject } from 'vue';

const FunctionalComponent = {
  functional: true,
  render() {
    const data = inject('data');

    return h('div', data);
  }
}