оглавление
Коммуникация компонентов - очень распространенная и важная часть Vue.
1. Связь от родительского к дочернему компоненту
1.1 реквизит
Реквизит - наиболее часто используемый метод.
// 父
<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>
Простой синтаксис реквизита
props: ['name']
props определяет только строковый тип
props: {
name: String
}
реквизит, если параметр является многотипным
props: {
name: ['String', 'Number']
}
1,2 исх.
Этот метод используется редко.
// 父
<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 дети
Экземпляр получается через дочерние элементы родительского компонента. Потомки представляют собой набор дочерних компонентов в родительском компоненте. В официальном документе говорится, что порядок внутри не гарантируется.
this.$children[0].age = 30
2. Ребенок общается с родительским компонентом.
2.1 испускать
Отправляйте события через дочерние компоненты, а родительские компоненты прослушивают события для передачи значений.
// 父
<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 Подкомпонентная коммуникация
Они должны иметь общий родительский компонент, отправлять события через $ parent. $ Emit, а затем прослушивать события через $ parent. $ On
3.1 родитель
// 父
<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 Отец передает ценность внуку
4.1 предоставить инъекцию
Используйте, когда слишком много уровней компонентов.
Родительский компонент обеспечивает предоставление, а другие компоненты получают значения через инъекцию, которые часто используются при разработке библиотек компонентов.
// 父
provide() {
return {
name: '小明'
}
}
// 子
inject: ['name']
5 Между любыми двумя компонентами
5.1 EventBus
Через eventBus обратитесь к той же шине для связи
// 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
Хранилище состояний Vuex адаптивно. Когда компонент Vue считывает состояние из хранилища, если состояние в хранилище изменяется, соответствующий компонент будет соответствующим образом обновлен.