Tabla de contenido
La comunicación de componentes es una parte muy común e importante de Vue.
1. Comunicación del componente de padres a hijos
1.1 apoyos
Los accesorios son el método más utilizado.
// 父
<template>
<child-component1 :name="name"></child-component1>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
data () {
return {
name: '小明'
}
},
}
</script>
// 子
<template>
<div>姓名：{
{
name }}</div>
</template>
<script>
export default {
props: {
name: {
type: String, // String、Number、Boolean、Array、Object、Date、Function、Symbol
default: '', // 默认值
required: true, // 定义该 prop 是否是必填项。如果为true未传值则会抛出警告
validator：Function, // 自定义验证参数，如果函数返回false则会抛出警告
}
},
}
</script>
Sintaxis simple de accesorios.
props: ['name']
props solo define el tipo de cadena
props: {
name: String
}
props si el parámetro es de varios tipos
props: {
name: ['String', 'Number']
}
1.2 ref
Este método rara vez se usa.
// 父
<template>
<div class="page">
<child-component1 :name="name" ref="cp"></child-component1>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
data () {
return {
name: '小明'
}
},
mounted () {
this.$refs.cp.age = 18
}
}
</script>
// 子
<template>
<div class="container">
<div>姓名：{
{
name }}</div>
<div>年龄：{
{
age }}</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
}
},
data () {
return {
age: 0
}
}
}
</script>
1.3 niños
La instancia se obtiene a través de los hijos del componente principal. Los hijos son una colección de componentes secundarios en el componente principal. El documento oficial dice que el orden en el interior no está garantizado.
this.$children[0].age = 30
2. El niño se comunica con el componente principal
2.1 emitir
Envíe eventos a través de componentes secundarios y los componentes principales escuchan eventos para pasar valores.
// 父
<template>
<div class="page">
<child-component1 @onChildComponen="onChildComponen"></child-component1>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
export default {
components: {
ChildComponent1
},
methods: {
onChildComponen (data) {
alert(data)
}
}
}
</script>
// 子
<template>
<div class="container">
<div @click="onClick">emit</div>
</div>
</template>
<script>
export default {
methods: {
onClick () {
this.$emit('onChildComponen', 1)
}
}
}
</script>
3 Comunicación de subcomponentes
Deben tener un componente principal común, enviar eventos a través de $ parent. $ Emit y escuchar eventos a través de $ parent. $ On
3.1 padre
// 父
<template>
<div class="page">
<child-component1 ></child-component1>
<child-component2 ></child-component2>
</div>
</template>
<script>
import ChildComponent1 from '@/components/ChildComponent1.vue'
import ChildComponent2 from '@/components/ChildComponent2.vue'
export default {
components: {
ChildComponent1,
ChildComponent2
}
}
</script>
// 子1
<template>
<div class="container">
<div @click="onClick">子组件1</div>
</div>
</template>
<script>
export default {
created () {
},
methods: {
onClick () {
this.$parent.$emit('hi', '你好')
}
}
}
</script>
// 子2
<template>
<div class="container">
<div>子组件2</div>
</div>
</template>
<script>
export default {
created () {
this.$parent.$on('hi', (data) => {
alert(data)
})
},
methods: {
}
}
</script>
4 Padre le pasa valor a su nieto
4.1 proporcionar inyectar
Úselo cuando haya demasiados niveles de componentes.
El componente principal proporciona provide y otros componentes obtienen valores a través de inject, que a menudo se utilizan en el desarrollo de bibliotecas de componentes.
// 父
provide() {
return {
name: '小明'
}
}
// 子
inject: ['name']
5 Entre dos componentes cualesquiera
5.1 eventBus
A través de eventBus, consulte el mismo bus para comunicarse
// bus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
// 组件1
<template>
<div class="container">
<div @click="onClick">子组件1</div>
</div>
</template>
<script>
import Bus from '@/bus.js'
export default {
created () {
},
methods: {
onClick () {
Bus.$emit('hi', '你好')
}
}
}
</script>
6. vuex
El almacenamiento de estado de Vuex responde. Cuando el componente Vue lee el estado de la tienda, si el estado de la tienda cambia, el componente correspondiente se actualizará en consecuencia.