Prefacio: en el trabajo real, existen muchos escenarios en los que los datos se procesan en componentes secundarios y los cambios de datos deben obtenerse sincrónicamente en los componentes principales. Por ejemplo, una página de consulta tiene muchas condiciones de consulta. Supongamos que hay un subcomponente que selecciona componentes para regiones. Necesitamos realizar la operación de consulta inmediatamente después de seleccionar la región. En este momento, necesitamos sincronizar los datos entre la página principal. y componentes secundarios.
1. Definición e introducción de subcomponentes
Hay dos formas de definir subcomponentes: registro global y registro local. Sin embargo, en mi trabajo real, básicamente uso el registro local para definir el subcomponente como un archivo. El componente principal introduce el subcomponente y registra el subcomponente .vueen import: componentscomponente
principal
import AreasSelector from '@/components/AreasSelector/index';
...
components: {
AreasSelector
},
Al utilizar un subcomponente en un componente principal, debe diseñar qué parámetros puede aceptar el subcomponente y qué parámetros debe devolver, según los respectivos escenarios comerciales.
Aquí mi componente secundario puede recibir dos parámetros pasados desde el componente principal: uno es la areaIdsregión que se ha seleccionado en el componente principal ids; el otro es isMultisi la región admite selecciones múltiples. Debe usarlo al pasar datos de un componente principal a un componente secundario props. Si está pasando datos estáticos (cadenas, números, etc.), no necesita agregarlos :. Si desea pasar datos dinámicos (datos que debe obtenerse de la instancia del componente actual), debe agregarlo :.
Los parámetros que devolverá el subcomponente son aquellos seleccionados después de que el usuario haga clic en el comportamiento areaIds. $onPara recibir los parámetros devueltos por el subcomponente, debe definir una función de devolución de llamada donde se usa el subcomponente, que es equivalente a un observador:
en el componente principal
<AreasSelector :props="{areaIds,isMulti:true}" @area-change="onAreaChange"></AreasSelector>
Cuando sea necesario enviar datos en un subcomponente, utilice $emitEnviar datos, que equivale a un editor:
en el subcomponente
this.$emit('area-change', newVal);
$onY $emitse usa el modo observador, es decir, $emitnecesita encontrar todas las $onfunciones de devolución de llamada definidas y luego ejecutar todas las funciones de devolución de llamada. Puede simplemente mirar vueel código fuente. Solo conservé las partes más críticas:
Vue.prototype.$emit = function (event) {
var vm = this;
// cbs中存储着$on定义的回调函数列表
var cbs = vm._events[event];
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1);
var info = "event handler for \"" + event + "\"";
for (var i = 0, l = cbs.length; i < l; i++) {
// 到这个函数中执行回调函数
invokeWithErrorHandling(cbs[i], vm, args, vm, info);
}
}
return vm
};
Segundo, mira
Dentro del componente secundario, cuando el usuario hace clic en una región, se requiere una serie de procesamiento, y el procesamiento se convierte en una idmatriz de regiones y se pasa al componente principal. Podemos llamar manualmente al proceso para pasarlo al componente principal $emit, o podemos dejarlo watchpara monitorear los cambios de datos y watchllamarlo internamente $emit.
El documento oficial de vigilancia
watch es vueun objeto de atributo que el componente puede configurar datay se utiliza para monitorear vuelos cambios en los datos del componente. Hay tres formas de definición keypara los datos que deben monitorearse : ① El nombre del método de la función de devolución de llamada , una cadena ② Objeto, en el cual El atributo es un método de función de devolución de llamada. Cuando el atributo es , significa que la función de devolución de llamada también se activará cuando los atributos profundos del objeto objetivo monitoreado cambien; cuando el atributo se establece en , se llamará inmediatamente después de que comience la escucha ③ Matriz de funciones de devolución de llamada, se ejecutarán en secuencia Podemos definir uno para los datos que deben pasarse al componente principal , monitorear sus cambios en tiempo real y llamar automáticamente :valuehandlerdeeptrueimmediatetruewatcher$emit
watch: {
'areaData': {
handler(newVal, oldVal) {
if (!newVal) return;
this.$emit('area-change', newVal);
},
deep: true,
immediate: true
}
},