[vue log] Explicación de ejemplos de comunicación entre componentes padre e hijo (props, $ ref, $ emit)

Prefacio

El componente es vue.jsuna de las características más poderosas, y las instancias del componente de alcance son independientes entre sí, lo que significa que entre los diferentes componentes de los datos no se pueden hacer referencia entre sí. Entonces, cómo comunicarse entre componentes se ha convertido en el conocimiento clave en vue. Este artículo pasará props, $refy $emitestos conocimientos apuntan a explicar cómo implementar los componentes de la comunicación entre padre e hijo.

1. Ejemplo

Dos componentes father.vuey child.vuecomo base del ejemplo.

//父组件
<template>
 <div>
 <h1>我是父组件！</h1>
 <child></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
    
 components: {
    
    Child},
}
</script>

//子组件
<template>
 <h3>我是子组件！</h3>
</template>

<script>
</script>

Los códigos de estas dos partes son muy claros: el componente principal importimporta el componente secundario a través del método y lo componentsregistra en las propiedades, y luego el componente secundario se puede <child>incrustar en el componente principal en forma de etiqueta . father.vueEl efecto después de correr es así:

En segundo lugar, realice la comunicación a través de accesorios.

Las propsopciones del componente secundario pueden recibir datos del componente principal. Así es, solo se puede recibir, propses un enlace unidireccional, es decir, solo el componente principal se puede pasar al componente secundario, no al revés. También hay dos formas de entrega:

2.1 Transferencia estática

El componente secundario propsdeclara un atributo personalizado a través de opciones, y luego el componente principal puede pasar datos al componente secundario a través de este atributo al anidar etiquetas.

 <!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
    
 components: {
    
    Child},
}
</script>

<!-- 子组件 -->
<template>
  <h3>{
    
    {
    
    message}}</h3>
</template>
<script>
 export default {
    
    
 props: ['message'] //声明一个自定义的属性
 }
</script>

2.1 Entrega dinámica

Ya sabemos que podemos dar propsun valor estático como el anterior , pero más a menudo necesitamos datos dinámicos. En este momento, puede utilizar v-bindpara lograr. A través de las propiedades personalizadas v-bindenlazadas props, la pasada no es una cadena estática, puede ser una expresión, valor booleano, objeto, etc. cualquier tipo de valor.

<!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child message="我是子组件一！"></child>

 <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
 <child v-bind:message="a+b"></child>

 <!-- 用一个变量进行动态赋值。-->
 <child v-bind:message="msg"></child>
 </div>
</template>

<script>
import Child from '../components/child.vue'
export default {
    
    
 components: {
    
    Child},
 data() {
    
    
 return {
    
    
  a:'我是子组件二！',
  b:112233,
  msg: '我是子组件三！'+ Math.random()
 }
 }
}
</script>

<!-- 子组件 -->
<template>
 <h3>{
    
    {
    
    message}}</h3>
</template>
<script>
 export default {
    
    
 props: ['message']
 }
</script>

El resultado es este:

Tres, realizar la comunicación a través de $ ref

La refexplicación oficial es: refse utiliza para registrar información de referencia para elementos o subcomponentes. La información de referencia se registrará en el componente principal del $refsobjeto.
No puedo entender, ¿verdad? Es normal y yo tampoco puedo entenderlo. ¿Cómo debe entenderse? Mira mi explicación:

• Si se refutiliza en un subcomponente, apunta a una instancia de componente, que puede entenderse como un índice del subcomponente, y es $refposible obtener los atributos y métodos definidos en el subcomponente.
• Si se usa refen un elemento DOM normal, la referencia apunta al elemento DOM, a través de la $refposibilidad de obtener el conjunto de atributos del DOM, se puede acceder fácilmente al elemento DOM, que es similar al selector JQ.

¿Cómo $reflograr la comunicación? A continuación propusaré las funciones implementadas anteriormente para $reflograrlo nuevamente:

<!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child ref="msg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
    
    
 components: {
    
    Child},
 mounted: function () {
    
    
  console.log( this.$refs.msg);
  this.$refs.msg.getMessage('我是子组件一！')
 }
 }
</script>

<!-- 子组件 -->
<template>
  <h3>{
    
    {
    
    message}}</h3>
</template>
<script>
 export default {
    
    
 data(){
    
    
  return{
    
    
  message:''
  }
 },
 methods:{
    
    
  getMessage(m){
    
    
  this.message=m;
  }
 }
 }
</script>

A partir del código anterior, podemos encontrar que ref=‘msg'se puede apuntar a la instancia del componente secundario hijo $ref, y los parámetros se pueden pasar al componente secundario msg.getMessage（）llamando al getMessagemétodo del componente secundario. Lo siguiente es “ console.log( this.$refs.msg);”contenido impreso, que puede darle una mejor comprensión, por lo refque obtenemos qué:

el efecto final es este:

aquí es para agregar un poco, propy $refla diferencia entre:

• propConcéntrese en la transferencia de datos, no puede llamar a propiedades y métodos en subcomponentes. Utilice escenarios como personalizar el título y el contenido cuando cree que los componentes del artículo son los más adecuados para su uso prop.
• $refCentrarse en el índice, que se utiliza principalmente para llamar a las propiedades y métodos de los subcomponentes, de hecho, no es bueno para la transferencia de datos. Y cuando se refusa en el elemento dom, se puede usar como selector, que es más útil que como índice.

Cuarto, realizar la comunicación a través de $ emit

En los dos ejemplos anteriores, el componente principal se comunica con el componente secundario y el componente secundario se comunica $emitcon el componente principal mediante la implementación de la comunicación.
La $emitexplicación en el sitio web oficial también es muy confusa. Según mi propio entendimiento, es la siguiente:

vm.$emit( event, arg )

$emitVincular un evento personalizado event. Cuando se ejecuta esta declaración, el parámetro se argpasa al componente principal, y el componente principal @eventescucha y recibe los parámetros.

<template>
 <div>
 <h1>{
    
    {
    
    title}}</h1>
 <child @getMessage="showMsg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
    
    
 components: {
    
    Child},
 data(){
    
    
  return{
    
    
  title:''
  }
 },
 methods:{
    
    
  showMsg(title){
    
    
  this.title=title;
  }
 }
 }
</script>

<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
    
    
 mounted: function () {
    
    
  this.$emit('getMessage', '我是父组件！')
 }
 }
</script>