prefacio
-
Recientemente, cuando se usan componentes padre-hijo, se accede a los datos y métodos del componente padre a través de this.$parent, y ocurre undefined.
-
El escenario real es que el componente principal tiene un cuadro de diálogo emergente, que contiene varios formularios de formulario de subcomponente, y solo se muestra un subcomponente de acuerdo con el logotipo.
-
El componente secundario necesita pasar una identificación a los datos en el componente principal. Piense en esto.$parent (relativamente simple), y no quiera usar this.$emit.
-
Pero se encuentra que la instancia this.$parent está impresa, pero los datos y métodos para acceder al componente principal no están definidos
Soluciones
-
Después de buscar la instancia this.$parent, encontré que no hay datos ni métodos del componente principal, y no es una instancia del componente principal.
-
Debido a que una capa del cuadro emergente de diálogo está fuera del componente secundario, this.$parent es la instancia del elemento y this.$parent.$parent es la instancia del componente principal.
-
Los subcomponentes pueden acceder directamente a los métodos de datos a través de this.$parent cuando no hay un paquete en <template></template>
-
Cuando el subcomponente se envuelve con un cuadro emergente de diálogo, acceda a datos y métodos a través de this.$parent.$parent (dependiendo de la situación real, cuántas capas se envuelven)
ejemplo de código
// 没有任何包裹是子组件访问父组件
const parent = this.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法
// 子组件被包裹时（比如dialog弹出框包裹时）
const parent = this.$parent.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法Resumir:
Después de este proceso, creo que tiene una profunda impresión preliminar de que el subcomponente Vue no puede acceder a los datos y métodos del componente principal usando this.$parent, pero la situación que encontramos en el desarrollo real es definitivamente diferente, por lo que debemos comprender su principio, y es siempre el mismo. ¡Vamos, golpea a los trabajadores!
Señale cualquier deficiencia, gracias -- Fengguowuhen