Prólogo
Cuando los componentes de varios niveles están anidados y los datos deben transferirse, el método más utilizado es a través de vuex. Si solo pasa datos sin procesamiento intermedio, use el procesamiento vuex, es un poco matando al pollo. La versión 2.4 de Vue proporciona otro método, usando v-bind = "$ attrs", para pasar atributos que no se consideran como enlaces de propiedad de accesorios en el componente primario al componente secundario, y generalmente se usan junto con la opción interitAttrs. La razón para mencionar estos dos atributos es que la aparición de los dos hace que la comunicación entre los componentes entre los componentes se vuelva concisa y clara para el negocio sin depender de vuex y bus de eventos.
Primero analice los siguientes escenarios de aplicación:
Comunicación entre el componente A y el componente B: (componente padre-hijo)
Como se muestra en la figura anterior, los tres componentes A, B y C están anidados en secuencia. De acuerdo con los hábitos de desarrollo de Vue, la comunicación del componente padre-hijo se puede lograr de las siguientes maneras:
A a B se pasa a los subcomponentes a través de accesorios, y B a A se implementa a través de $ emit en el componente B y la v-on en el componente A.
Al establecer el estado global de Vuex compartido, los datos se calculan mediante atributos calculados y comprometen la mutación. Obtenga y actualice para lograr el propósito de la comunicación entre los componentes principales y secundarios.
Vue Event Bus usa instancias de Vue para monitorear y publicar eventos, y para comunicarse entre componentes.
A menudo, cuando los datos no necesitan una situación global, pero solo los componentes padre-hijo se comunican, la primera forma puede satisfacerse.
Comunicación entre componentes A y C: (a través de múltiples niveles de relación de anidamiento de componentes)
Como se muestra en la figura anterior, el componente A y el componente C están anidados en múltiples niveles de componentes. En el pasado, si era necesaria la comunicación entre los dos, a menudo se implementaban de las siguientes maneras:
componente B por medio de transferencia, se transmite secuencialmente de arriba a los apoyos inferiores, desde la parte inferior, pasando $ evento EMIT, lograr componentes de nivel transversal en la comunicación
a través de un estado global compartida Vuex
ejemplo Vue bus de eventos, Vue utiliza para lograr evento escuchar Y liberar, para lograr la transferencia entre componentes.
Obviamente, el primer método, a través de accesorios y $ emit, hace que la lógica de negocios entre los componentes se hinche, y el componente B solo sirve como una estación de tránsito. Si se usa el segundo método Vuex, en algunos casos parece un poco exagerado (solo para lograr una transferencia de datos entre componentes, no el concepto de intercambio de datos). El uso de la tercera situación se encuentra en las operaciones reales del proyecto. Si no se logra la gestión del monitoreo y lanzamiento de eventos, a menudo es fácil causar confusión en el flujo de datos. En un proyecto de colaboración de varias personas, no es propicio para el mantenimiento del proyecto.
La aparición de $ attrs y $ listeners resuelve el problema del primer caso. En el proceso de accesorios y eventos que pasan por los componentes B, no hay necesidad de escribir código adicional, solo pasa $ attrs y $ listeners hacia arriba o hacia abajo. Si
El código de muestra es el
siguiente:
Un componente (App.vue)
<template>
<div id="app">
<child1
:p-child1="child1"
:p-child2="child2"
v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发
v-on:test2="onTest2">
</child1>
</div>
</template>
<script>
import Child1 from './Child1.vue';
export default {
data () {
return {};
},
components: { Child1 },
methods: {
onTest1 () {
console.log('test1 running...');
},
onTest2 () {
console.log('test2 running');
}
}
};
</script>
Componente B (Child1.vue)
<template>
<div class="child-1">
<p>in child1:</p>
<p>props: {{pChild1}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
<!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
props: ['pChild1'],
data () {
return {};
},
inheritAttrs: false,
components: { Child2 },
mounted () {
this.$emit('test1');
}
};
</script>
El resultado:
en niño1:
accesorios: v_child1
$ attrs: {“p-child2”: “v_child2”}
Componente C (Child2.vue)
<template>
<div class="child-2">
<p>in child2:</p>
<p>props: {{pChild2}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
</div>
</template>
<script>
export default {
props: ['pChild2'],
data () {
return {};
},
inheritAttrs: false,
mounted () {
this.$emit('test2');
}
};
</script>
El resultado:
en niño2:
accesorios: v_child2
$ attrs: {}
Resumen de conocimiento
$ attrs
contiene enlaces de características (excepto clase y estilo) que no se consideran (y no se esperan) accesorios en el ámbito principal. Cuando un componente no declara ningún accesorio, contendrá todos los enlaces del ámbito principal (excepto la clase y el estilo), y se puede pasar al componente interno a través de v-bind = "$ attrs" -cuando se crea un componente de nivel superior Es muy útil
// Palabras humanas: introduzca el componente Sun en el componente hijo y pase los datos de utilería a través de la declaración v-bind = "$ attrs". Si la declaración de utilería pasa los datos, solo se pueden obtener los componentes no declarados en el componente Sun. Datos
$ oyentes
Contiene escuchas de eventos v-on en el ámbito primario (sin decorador .native). Se puede pasar a los componentes internos a través de v-on = "$ listeners", muy útil al crear componentes de nivel superior.
// Palabras humanas: introduzca el componente nieto en el componente hijo y declare a través de v-on = "$ listeners", que permite que el componente nieto emita eventos para que el componente padre escuche
inheritAttrs
De forma predeterminada, los enlaces de atributos que no se consideran accesorios en el ámbito primario "retrocederán" y se aplicarán al elemento raíz del componente secundario como características HTML normales. Al escribir un componente que envuelve un elemento objetivo u otro componente, esto no siempre se ajusta al comportamiento esperado. Al establecer herencia a atributos falsos, se eliminarán estos comportamientos predeterminados. Y a través del atributo de instancia (también agregado en 2.4) $ attrs puede hacer que estas características surtan efecto y pueden vincularse explícitamente a elementos no raíz mediante v-bind.
// Palabras humanas: tengo entendido que el ámbito primario predeterminado no admite la transferencia de nivel cruzado. Al declarar herencia / atributos: falso en componentes secundarios y grandes, los accesorios se pueden transferir a través de niveles
El uso de las características anteriores puede reducir completamente la complejidad de los accesorios de nivel cruzado de componentes y la entrega de eventos sin usar Vuex y el bus de eventos.