table of Contents
Component communication is a very common and important part of Vue.
1. Communication from parent to child component
1.1 props
Props are the most commonly used method.
// 父
<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>
Simple syntax of props
props: ['name']
props only defines string type
props: {
name: String
}
props if the parameter is multi-type
props: {
name: ['String', 'Number']
}
1.2 ref
This method is rarely used.
// 父
<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 children
The instance is obtained through the children of the parent component. The children is a collection of child components in the parent component. The official document says that the order inside is not guaranteed.
this.$children[0].age = 30
2. The child communicates with the parent component
2.1 emit
Dispatch events through child components, and parent components listen for events to pass values.
// 父
<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 Sub-component communication
They need to have a common parent component, dispatch events through $parent.$emit, and then listen for events through $parent.$on
3.1 parent
// 父
<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 Father passes value to grandson
4.1 provide inject
Use when there are too many component levels.
The parent component provides provide, and other components obtain values through inject, which are often used in the development of component libraries.
// 父
provide() {
return {
name: '小明'
}
}
// 子
inject: ['name']
5 Between any two components
5.1 eventBus
Through eventBus, refer to the same bus to communicate
// 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's state storage is responsive. When the Vue component reads the state from the store, if the state in the store changes, the corresponding component will be updated accordingly.