Pasar valores entre los componentes de Vue (súper completo, generación cruzada) de padre a hijo, de hijo a padre, de abuelo a nieto, de nieto a nieto, explicación a nivel de niñera

prefacio

Después de leer muchas publicaciones sobre el paso de parámetros entre los componentes de vue, descubrí que muchos están incompletos. No tengo nada que hacer hoy para resumir el valor que pasa entre los componentes de vue. Este artículo trata sobre: ​​padre a hijo, hijo a padre, padre a nieto , de nieto a abuelo La transferencia de valor entre componentes está escrita con más detalle. Estudiantes, no crean que soy prolijo. Este artículo debería haber alcanzado el nivel de niñera. Si no lo entienden, vengan y golpéenme.
Los tres componentes utilizados esta vez se denominan: Father, Son, GrandSon.

Preparación

Primero mire el código de los siguientes tres componentes:

1. Componente principal

<template>
    <div class="father">
        <h1>父组件</h1>
        <Son></Son>
    </div>
</template>

2. Subcomponentes

<template>
    <div class="son">
        <h1>子组件</h1>
        <GrandSon></GrandSon>
    </div>
</template>

3. Componente solar

<template>
    <div class="grandson">
        <h1>孙组件</h1>
    </div>
</template>

Para facilitar la distinción, aquí hay una breve descripción del estilo, y el efecto de renderizado es como se muestra en la figura:

pasar valor entre componentes

1. De padre a hijo

Primero represente el valor en el componente principal toSondentro del componente principal.

<template>
    <div class="father">
        <h1>父组件</h1>
        <h1>{
   
   {toSon}}</h1>
        <Son></Son>
    </div>
</template>

<script>
    import Son from './Son.vue'
    export default {
      
      
        name: "Father",
        components:{
      
       Son },
        data(){
      
      
            return{
      
      
                toSon:"这是父组件传给子组件的值！~"
            }
        }
    }
</script>

Aviso:这里还没有进行传参

Como todos sabemos: pasar de padre a hijo es usar atributos personalizados para pasar parámetros y usar propsdatos recibidos.
Definimos propiedades personalizadas en los componentes secundarios utilizados en los componentes principales :son.

<Son :son="toSon"></Son>

Luego recibimos datos en el subcomponente, y los datos recibidos deben corresponder a sonlas propiedades personalizadas anteriores :son.

props: {
    
    
            son:String
        },

También se puede escribir así:

        props:["son"],

La primera forma de escribir puede especificar el tipo de datos recibidos o el valor predeterminado, y la segunda forma de escribir es más conveniente, puede agregar comas directamente a la última fila en forma de matriz.
Luego usamos los datos recibidos en componentes secundarios.

<template>
    <div class="son">
        <h1>子组件</h1>
        <h1>{
   
   {son}}</h1>
        <GrandSon></GrandSon>
    </div>
</template>

Entonces se completa el padre a hijo, como se muestra en la figura:

2. hijo padre

Primero, el valor del componente secundario que debe pasarse al componente principal se representa dentro del componente secundario:

<template>
    <div class="son">
        <h1>子组件</h1>
        <h1>{
   
   {toFather}}</h1>
        <GrandSon></GrandSon>
    </div>
</template>

<script>
    import GrandSon from './GrandSon.vue'
    export default {
      
      
        name: "Son",
        components:{
      
       GrandSon },
        data(){
      
      
            return{
      
      
                toFather:"这是子组件传给父组件的值！~"
            }
        }
    }
</script>

Aviso:这里还没有传参

Pasar de hijo a padre se basa en eventos personalizados, que se utilizan para recibir datos $emitAquí
agregamos h1un evento de clic para llamar sendToFatheral método, que se utilizará para activar nuestros eventos personalizados más adelante.

<template>
    <div class="son">
        <h1>子组件</h1>
        <h1 @click="sendToFather">{
   
   {toFather}}</h1>
        <GrandSon></GrandSon>
    </div>
</template>

Luego methodsmaneje este método en:

methods:{
    
    
            sendToFather() {
    
    
                this.$emit("father",this.toFather)
            }
        }

fatherSignifica que después de activar el evento de clic para llamar a la función sendToFather, se activará un evento personalizado father, this.toFatherque indica el valor que se pasará al componente principal en el componente secundario.
Después de procesar el componente secundario, ingresamos el componente principal. Necesitamos agregar un evento personalizado en la posición donde el componente principal llama al componente secundario, fathery luego la función getFromSonpuede recibir los datos entrantes. Para ser más intuitivos, debemos primero ponga un hoyo valueOfSonpara recibir los datos.El código del componente principal es el siguiente:

<template>
    <div class="father">
        <h1>父组件</h1>
        <h1>{
   
   {valueOfSon}}</h1>
        <Son @father="getFromSon"></Son>
    </div>
</template>

<script>
    import Son from './Son.vue'
    export default {
      
      
        name: "Father",
        components:{
      
       Son },
        data(){
      
      
            return{
      
      
                valueOfSon:"子组件接收数据的坑~"
            }
        },
        methods:{
      
      
            getFromSon(val){
      
      
                this.valueOfSon=val
            }
        }
    }
</script>

未传值时, la página es como se muestra en la figura:

Luego hacemos clic en el componente secundario h1:, 这是子组件传给父组件的值！~ activamos sendToFatherla función, luego activamos el evento personalizado father, pasamos toFatherel valor, activamos el evento en el componente principal father, llamamos getFromSona la función, pasamos el valor recibido valueOfSony encontraremos que los datos restantes del pit cambia a 这是子组件传给父组件的值！~, el valor se pasa con éxito.

3. nietos

Antes que nada, déjame explicarte: como has aprendido a pasar de padre a hijo, no es difícil pasar de padre a hijo, puedes pasarlo de padre a hijo, y luego de hijo a nieto, paso paso a paso, así que no entraré en detalles aquí.
El método utilizado aquí es $attrspasar parámetros, que es más conciso que los anteriores. En primer lugar, aún llegamos a un estado inicial y primero mostramos los parámetros del componente principal en el componente principal en sí:

<template>
    <div class="father">
        <h1>父组件</h1>
        <h1>{
   
   {toGrandSon}}</h1>
        <Son></Son>
    </div>
</template>

<script>
    import Son from './Son.vue'
    export default {
      
      
        name: "Father",
        components:{
      
       Son },
        data(){
      
      
            return{
      
      
                toGrandSon:"父组件传给孙组件的值！~"
            }
        },
    }
</script>

Aviso:现在还未传参

En primer lugar, necesitamos usar propiedades personalizadas en el componente secundario al que hace referencia el componente principal y pasar el valor al componente secundario primero. Aquí definimos las propiedades personalizadas :grandson.

<template>
    <div class="father">
        <h1>父组件</h1>
        <h1>{
   
   {toGrandSon}}</h1>
        <Son :grandson="toGrandSon"></Son>
    </div>
</template>

Luego viene el punto importante: no necesitamos usar propsel subcomponente para recibir datos en este momento, sino enlazar directamente con el componente secundario al que hace referencia el subcomponente v-bind="$attrs". Aquí este código es como un conducto, pasando directamente los datos al componente secundario. .

<template>
    <div class="son">
        <h1>子组件</h1>
        <GrandSon v-bind="$attrs"></GrandSon>
    </div>
</template>

Entonces, si se dice que lleva los datos al componente nieto, entonces podemos usar los datos recibidos dentro del componente nietos en este momento props, y luego mostraremos los datos recibidos.

<template>
    <div class="grandson">
        <h1>孙组件</h1>
        <h1>{
   
   { grandson }}</h1>s
    </div>
</template>

<script>
    export default {
      
      
        name: "GrandSon",
        props:{
      
      
            grandson:String
        }
    }
</script>

Recibido con éxito, el efecto es como se muestra en la figura:

4. Sun Chuanye

Lo mismo que arriba: ya que ha aprendido a transmitir de hijo a padre, no es difícil transmitirlo a un nieto de padre a hijo. Puede transmitirlo primero de hijo a padre, luego de padre a padre, paso a paso. paso a paso, así que no entraré en detalles aquí.
El método utilizado aquí es $listenerspasar parámetros, que es más conciso que los anteriores. En primer lugar, aún llegamos a un estado inicial y primero mostramos los parámetros del componente nieto en el componente nieto mismo:

<template>
    <div class="grandson">
        <h1>孙组件</h1>
        <h1>{
   
   { toFather }}</h1>
    </div>
</template>

<script>
    export default {
      
      
        name: "GrandSon",
        data(){
      
      
            return{
      
      
                toFather:"孙组件传给父组件的值!~"
            }
        }
    }
</script>

Aquí h1: "孙组件传给父组件的值！~"agregue un evento de clic para activar sendToFatherla función para pasar parámetros:

<template>
    <div class="grandson">
        <h1>孙组件</h1>
        <h1 @click="sendToFather">{
   
   { toFather }}</h1>
    </div>
</template>

Luego methodsmaneja sendToFatherla función en:

methods:{
    
    
            sendToFather(){
    
    
                this.$emit("father",this.toFather)
            }
        }

Lo que se activa aquí es un evento personalizado father, que se define más adelante, y el valor pasado es toFather："孙组件传给父组件的值!~"
entonces el punto clave: no necesitamos usar el evento personalizado "padre" para recibir datos en el subcomponente, sino directamente en el componente nieto. al que hace referencia el subcomponente Binding v-on="$listeners", donde esta pieza de código actúa como un conducto, pasando datos directamente al componente principal.

<template>
    <div class="son">
        <h1>子组件</h1>
        <GrandSon v-on="$listeners"></GrandSon>
    </div>
</template>

Después de que los subcomponentes se hayan procesado parcialmente, echemos un vistazo al componente principal. Aquí hay un pozo para recibir datos y luego definir el evento personalizado mencionado anteriormente para que llame a una función y luego procese los datos en la función father. getFromGrandSonEl getFromGrandSoncódigo del componente padre es el siguiente:

<template>
    <div class="father">
        <h1>父组件</h1>
        <h1>{
   
   { valueOfGrandSon }}</h1>
        <Son @father="getFromGrandSon"></Son>
    </div>
</template>

<script>
    import Son from './Son.vue'
    export default {
      
      
        name: "Father",
        components:{
      
       Son },
        data(){
      
      
            return{
      
      
                valueOfGrandSon:"接收孙组件传参的坑~"
            }
        },
        methods:{
      
      
            getFromGrandSon(val){
      
      
                this.valueOfGrandSon=val
            }
        }
    }
</script>

Cuando no se pasan parámetros, como se muestra en la figura:

En este momento, hacer clic en el texto del subcomponente h1activa el evento de clic, ejecuta sendToFatherla función y luego activa el evento personalizado , que actúa como un conducto fatheren el subcomponente, pasa el evento al componente principal y luego el evento en el componente principal. El componente se activa, la función se ejecuta y el valor pasado se asigna a . como muestra la imagen:$listenersfathergetFromGrandSonvalueOfGrandSon

¡DE ACUERDO! ~, ya terminaste, aquí de padre a hijo, de hijo a padre, de padre a nieto, de nieto a nieto y de abuelo a nieto, hagamos una pequeña expansión a continuación, los estudiantes que ya lo han entendido pueden omitirlo.

expandir

• 只是自己的一点见解，如有错误欢迎指正。

1. Atributos personalizados

• En vue, a menudo usamos algunos atributos dinámicos, como :class, :id, :src, :key, etc.
  Estos atributos tienen una característica común: todos están estipulados por el sistema y tienen funciones específicas, como ser :classseguidos por valores, que pueden ser dinámica La clase a la que vincular este elemento.
  A estos atributos me refiero colectivamente como: 系统自带的属性.
• Y algunos atributos los escribimos nosotros mismos, como el anterior :sony el anterior :grandson, solo sabemos para qué se usan estos atributos, e incluso puede escribirlos :abcpara :qwerdfdefinir estos atributos.
  A estos atributos me refiero colectivamente como: 自定义属性.
• 需要强调的是，使用父传子或者爷传孙的时候，一定要使用自定义属性，如果你使用了系统自带的属性来传参是万万行不通的。

2. Eventos personalizados

• En vue, también solemos usar algunos eventos, como @click, @dbclick, @keyup, @keydowmetc.
  Estos eventos tienen una característica común que es: todos están estipulados por el sistema y tienen funciones específicas, por ejemplo, está @clickestipulado que haga clic en un determinado para activar la función que se ejecutará más tarde.
  Dichos eventos, me refiero colectivamente como: 系统自带的事件.
• Y algunos eventos los escribimos nosotros mismos. Como se mencionó anteriormente @father, solo nosotros sabemos cuándo se activan estos eventos. El mecanismo de activación anterior está escrito en el evento de clic. También puede tener más opciones. Incluso puede escribirse @abcpara @qwerdfdefinir estos eventos.
  Dichos eventos, me refiero colectivamente como: 自定义事件.
• 需要强调的是，使用子传父或者孙传爷的时候，一定要使用自定义事件，如果你使用了系统自带的事件来传参也是万万行不通的。

3.$atributos

• $attrsSe agregó en la versión 2.40 de vue.
• Contiene enlaces de atributo ( y excepciones) que no se propreconocen (ni se adquieren) en el ámbito principal. Cuando un componente no declara ningún , todos los enlaces de ámbito principales ( excepto y ) se incluyen aquí y se pueden pasar a los componentes internos, lo que resulta útil al crear componentes de alto nivel.classstylepropclass stylev-bind="$attrs"
• En pocas palabras, incluye todas las propiedades establecidas por el componente principal en el componente secundario (excepto proplas propiedades pasadas classy style).

4.$oyentes

• $listenersSe agregó en la versión 2.40 de vue.
• Contiene detectores de eventos (sin .nativeel decorador) en el ámbito principal. v-onSe puede v-on="$listeners"pasar a componentes internos a través de -muy útil cuando se crean componentes de nivel superior.
• En pocas palabras, es un objeto que contiene todos los oyentes (escuchas de eventos) que actúan sobre este componente. Puede apuntar el v-on="$listeners" detector de eventos a los subelementos de este componente (incluidos los subcomponentes internos).

5. heredar atributos

• inheritAttrsSe agregó en la versión 2.40 de vue.
• tipo: boolean
• Valores predeterminados:true
• Si el componente principal pasa datos al componente secundario y el componente secundario no utiliza el receptor, los datos se utilizarán propscomo los atributos del elemento HTML del componente secundario, y estos atributos están vinculados al elemento raíz HTML de el componente.
• Si no desea que el elemento raíz de este componente herede del componente principal attributey los atributos pasados ​​por el componente principal (no propsrecibidos por el componente secundario), no desea que se muestre en el elemento dom del componente secundario inheritAttrs: false, pero puede usarlo en el componente secundario Al $attrsobtener atributos de registro no utilizados, el enlace de inheritAttrs: falseestilo y no se verá afectado class.

Por ejemplo: vinculo propiedades personalizadas en el componente principal :abcy recibo datosmsg:"666"

<Son :abc="msg"></Son>

data(){
    
    
    return{
    
    
         msg:"666"
     }
}

Si la recepción de accesorios no es aplicable en los subcomponentes, veremos tal situación: las propiedades personalizadas se representan en el div de los subcomponentes.

<div class="son" abc="666">
     <h1>子组件</h1>
</div>

Y si sumamos inheritAttrs: false, de la siguiente manera:

export default {
    
    
        name: "Son",
        inheritAttrs: false,
        components:{
    
     GrandSon },
    }

Se representará de la siguiente manera y los atributos personalizados desaparecerán.

<div class="son">
     <h1>子组件</h1>
</div>

Nota: La inheritAttrsoperación de par no afecta nuestro $attrsuso del par.

epílogo

El artículo está aquí. Si has aprendido algo aquí, espero que puedas darme un me gusta, un comentario y un marcador. Muchas gracias por tu apoyo. Seguiré escribiendo de manera seria en el camino hacia los blogs.加油 ♪(･ω･)ﾉ