Escuché que Vue 3 ha agregado muchas características nuevas e interesantes, como API combinadas, etc. ¡Hoy vamos a hablar sobre la API combinada en Vue 3 y cómo usar provide/inject para hacerlo!
Primero, comprendamos qué es una API de composición. De hecho, la API combinada es una herramienta utilizada para crear y combinar funciones, que puede hacer que nuestro código sea más conciso, más legible y mejorar la eficiencia de nuestro trabajo.
Entonces, ¿cómo utilizamos proporcionar/inyectar? De hecho, proporcionar e inyectar son dos métodos correspondientes que se pueden utilizar para pasar datos entre componentes principales y componentes secundarios.
Primero veamos cómo usar provide. En Vue 3, proporcionar se puede utilizar así:
// 在父组件中提供数据
provide: {
foo: 'foo',
bar: 'bar'
}
De esta manera, podemos obtener los datos proporcionados por el componente principal mediante la inyección en el componente secundario.
A continuación, echemos un vistazo a cómo utilizar inyectar. En Vue 3, inyectar se puede utilizar así:
// 在子组件中注入数据
inject: ['foo', 'bar']
De esta manera, podemos usar datos de foo y bar en componentes secundarios. ¿No es muy sencillo?
Por supuesto, también podemos usar valores predeterminados en proporcionar e inyectar, de modo que si el componente principal no proporciona datos, el componente secundario pueda funcionar normalmente. Por ejemplo:
// 在父组件中提供数据，并设置默认值
provide: {
foo: 'foo',
bar: 'bar',
baz: 'baz'
},
// 在子组件中注入数据，并设置默认值
inject: ['foo', 'bar', 'baz'],
default: {
baz: 'default-baz'
}
De esta manera, si el componente principal no proporciona datos de baz, el componente secundario utilizará el valor predeterminado default-baz.
Finalmente, echemos un vistazo a cómo usar proporcionar/inyectar componentes. Por ejemplo, tenemos un componente padre y un componente hijo:
<!-- Parent.vue -->
<template>
<div>
<Child></Child>
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child,
},
provide() {
return {
foo: 'foo',
bar: 'bar',
};
},
};
</script>
<!-- Child.vue -->
<template>
<div>
<p>{
{ foo }}</p>
<p>{
{ bar }}</p>
</div>
</template>
<script>
export default {
inject: ['foo', 'bar'],
};
</script>
De esta manera, podemos utilizar los datos proporcionados por provide en el componente secundario. ¿No es muy sencillo?
En conclusión, proporcionar/inyectar es una función muy útil en Vue 3, que puede ayudarnos a pasar datos entre componentes principales y secundarios. Si aún no lo has probado, ¡pruébalo!
Por supuesto, proporcionar/inyectar también se puede utilizar para pasar datos entre componentes hermanos. Por ejemplo, tenemos tres componentes hermanos: A, B y C. El componente A necesita pasar datos al componente B y al componente C. Puede usar el método de proporcionar para proporcionar datos y luego usar el método de inyección para inyectar datos en el componente B y el componente C.
// 在 A 组件中提供数据
provide: {
foo: 'foo',
bar: 'bar'
},
// 在 B 组件和 C 组件中注入数据
inject: ['foo', 'bar'],
De esta manera, el componente B y el componente C pueden obtener los datos proporcionados por el componente A a través de foo y bar data.
En resumen, proporcionar/inyectar es una característica muy útil en Vue 3, que puede ayudarnos a pasar datos entre componentes. Proporcionar/inyectar se puede utilizar ya sea entre componentes padre e hijo o entre componentes hermanos. Si aún no lo has probado, ¡también puedes intentarlo!
Además, proporcionar/inyectar también se puede utilizar para llamadas recursivas entre componentes. Por ejemplo, tenemos una estructura de árbol de datos, cada nodo contiene una matriz de nodos secundarios y una función de llamada recursiva. Podemos usar el método de provisión en cada componente del nodo para proporcionar datos y luego usar el método de inyección en el componente del nodo secundario para inyectar datos, de modo que toda la estructura del árbol se pueda representar de forma recursiva.
// 在父节点组件中提供数据
provide: {
foo: 'foo',
bar: 'bar',
childNodes: [
{
id: 1,
name: 'Node 1',
childNodes: [
{
id: 2,
name: 'Node 1-1',
},
{
id: 3,
name: 'Node 1-2',
},
],
},
{
id: 4,
name: 'Node 2',
childNodes: [
{
id: 5,
name: 'Node 2-1',
},
{
id: 6,
name: 'Node 2-2',
},
],
},
],
},
// 在子节点组件中注入数据
inject: ['foo', 'bar'],
De esta manera, podemos usar los datos proporcionados por provide en el componente del nodo secundario y llamar al componente del nodo secundario de forma recursiva para representar toda la estructura del árbol.
En resumen, proporcionar/inyectar es una función muy poderosa en Vue 3, que puede ayudarnos a transferir datos entre componentes y realizar escenas complejas, como la representación recursiva de estructuras de árbol. Si aún no lo has probado, ¡también puedes intentarlo!