La forma en que se comunican los componentes de Vue no se limita a los componentes padre-hijo
1: accesorios y $emitir
Se aplica a componentes padre-hijo.
- El componente principal pasa accesorios y eventos a los componentes secundarios.
- Los componentes secundarios reciben accesorios y usan `this.$emit` para llamar a eventos
El código directo es más conveniente con explicaciones en cada paso.
--父组件
<HelloWorld msg='传递给子组件的内容' @sayHi="sayHi"/>//当子元素emit'sayHi'的时候会调用父元素中的sayHi方法
methods: {
sayHi(msg) {//收到子元素传递来的数据
console.log(msg);//Hi
}
}
--子组件
<template>
<h1 @click="clickHandler">{
{ msg }}</h1>
</template>
export default {
props: { //接受父元素传来的数据
msg: String
},
emits: ['showMsg'], // Vue3 如果是vue2不需要写emits
methods: {
clickHandler() {
this.$emit('sayHi', 'Hi')//向父元素传递数据
}
},
}Dos: $refs
Se puede obtener un determinado subcomponente a través de `this.$refs.xxx`, siempre que `ref="xxx"` esté configurado en el subcomponente.
[Nota 1] Obtenga `this.$refs` en `montado`
[Nota 2] $children se eliminó en vue3, por lo que se recomienda usar ref al obtener componentes secundarios.
父组件
<template>
<HelloWorld ref='helloWord' msg='传递给子组件的内容' @sayHi="sayHi"/>
</template>
mounted() {
console.log(this.$refs.helloWord) //这里就能够打印子组件所有的内容包括data和method 可以直接调用子组件中的方法
},Tres: $padre
Puede obtener el componente principal a través de `this.$parent` y puede continuar obteniendo propiedades, llamar a métodos, etc.
Esto se puede llamar directamente en el subcomponente y no es necesario publicar el código.
Cuatro: eventos personalizados
Adecuado para componentes hermanos o dos componentes que están muy separados y no pueden golpearse con ocho polos.
Esto se divide en vue2 y vue3, pero no importa vue2 o vue3, debes recordar destruirlo. La diferencia es que vue2 se destruye en beforeDestroy () y vue3 se destruye en beforeUnmount ().
1- Hablemos primero de vue2
要注意引入event
event.js
import Vue from 'vue'
export default new Vue() //其实就是个vue实例 你要是不嫌弃麻烦愿意每次都event也不是不可以
----A组件
import event from './event'
mounted() {
addTitleHandler(title) {
console.log('on add title', title)
}
// 绑定自定义事件
event.$on('onAddTitle', this.addTitleHandler)//addTitleHandler是事件名字
}，
beforeDestroy() {
// 及时销毁，否则可能造成内存泄露
event.$off('onAddTitle', this.addTitleHandler)
}
----B组件
methods: {
addTitle() {
// 调用自定义事件
event.$emit('onAddTitle', this.title)
this.title = ''
}
} 2-vue3 requiere el uso de bibliotecas de terceros para implementar eventos personalizados
Aquí uso el emisor de eventos (simplemente descárgalo de npm)
import ee from 'event-emitter'
const event = ee()
export default event
其他的与vue2一致 再次提醒！！在vue3中销毁是
beforeUnmount() {
event.off('onAddTitle', this.addTitleHandler)
},
Cinco: $attr
El almacenamiento $attrs se pasa desde el componente principal y no hay propiedades ni eventos definidos en `props` y `emits`.
Equivale a un suplemento de accesorios y emisiones.
[Nota] Algunos accesorios y emisiones no aparecerán en este $attrs.
[Nota] En vue2, el evento se obtendrá en $listener, pero vue3 lo elimina o lo fusiona en atributos.
Además, supongamos que tenemos los componentes anidados A, BB y C. Si c quiere obtener el contenido de A, puede usar v-bind="$attrs" en B. De esta manera, C puede obtener todos los accesorios y emite de A y B. Contenido
组件A
<template>
<p>A <input v-model="name"></p>
<B
:a="a"
:b="b"
@getA="getA"
@getB="getB"
></B>
</template>
组件B
<template>
<p>B <input v-model="name"></p>
<C
:y="y"
:z="z"
@getZ="getZ"
@getY="getY"
v-bind="$attrs"//相当于把B获取到的attrs全部传递给了c
></C>
</template>
export default {
props: ['a'],
emits: ['getA'],
data() {
return {
y: 'yyy',
z: 'zzz'
}
},
created() {
//可以获取到b和getb 因为他们没有在props和emit里
console.log(this.$attrs)
},
methods: {
getY() {
return this.y
},
getZ() {
return this.z
}
},
}
组件C
export default {
props: ['y'],
emits: ['getY'],
created() {
//可以获取到b，z和getb getz 因为他们没有在props和emit里
//获取到b和getb是因v-bind如果没有写这个属性 只会获取到B组件传来的不再props和emit中的数据和方法
console.log(this.$attrs)
},
}
}
Seis: proporcionar/inyectar
Personalmente, creo que esta es una solución relativamente perfecta que se puede utilizar para componentes anidados de varias capas.
Siempre que un atributo se proporcione en el nivel superior, sus descendientes pueden obtener estos datos sin importar cuántas capas se encuentren entre sí.
[Nota] Existen ligeras diferencias en los métodos de escritura de vue2 y vue3, que se muestran en el siguiente código.
[Nota] El hecho de que la capa superior se inyecte o no no afecta el componente de esta capa para obtener el suministro.
组件A
<template>
<p>A <input v-model="name"></p>
<B></B>
</template>
import { computed } from 'vue'
export default {
data() {
return {
a:'aa',
}
},
//传递一个静态数据 vue2 和 vue3 写法一致
// provide: {
// info: 'aaa'
// }
//vue2传递data中的数据
provide() {
return {
info:this.a
}
}
//vue3传递data中的数据
provide() {
return {
info: computed(() => this.a)
}
}
}
组件B
<template>
<p>{
{info}}</p> //可以在这里直接使用
<C></C>
</template>
export default {
inject: ['info'] //获取到info
}
组件C 同理 无论组件B是否使用inject 都不影响C
Siete: vuex
Vuex es el almacenamiento de datos global. Escribiré un artículo más adelante para compartir con todos el contenido resumido en las notas.
(Jajaja, he estado posponiendo esto principalmente por pereza, porque compartir debe escribirse para que todos puedan entenderlo. Puedo organizarlo y entenderlo por mí mismo. Suficiente)