Table of contents
3. Communication between brothers
3.1. Parent component acts as middleware
3.2. Global event bus—EventBus
4. Communication between grandfather and grandson
Preface: There are many methods of component communication at present. I will select some of them here.
| plan | From father to son | child father |
|---|---|---|
| props / emits | props | emits |
| v-model / emits | v-model | emits |
| ref / emits | ref | emits |
| provide / inject | provide | inject |
| EventBus | emit / on (can be used for brothers, grandsons, and the whole world) | emit / on (can be used for brothers, grandsons, and the whole world) |
| Vuex | Act on the global | Act on the global |
| beans | Act on the global | Act on the global |
1. Pass from father to son
Mainly usedprops attribute to pass, the parent component passes the value to the child component through custom attributes, and the child component uses props to receive it
Example:
Subcomponent TitleMore.vue
// 子组件
<template>
<span class="pub-title">{
{ title }}</span>
</template>
<script setup>
// defineProps 可以直接使用，不需要另外引入
/**
* @property {String} title 标题
*/
const props = defineProps({
title: {
type: String,
default: "",
},
})
</script>Parent component
<template>
<title-more title="基本信息" />
</template>
<script setup>
import TitleMore from "@components/TitleMore.vue"
</script>2, child father
Subassembly
// 子组件
<template>
<span class="pub-title" @click="onClick">{
{ title }}</span>
</template>
<script setup>
// defineEmits 可以直接使用，不需要另外引入
const emits = defineEmits(["click"])
const onClick = () => {
emits("click",'123')
}
</script>parent component
<template>
<title-more title="基本信息" @click="handleClick" />
</template>
<script setup>
import TitleMore from "@components/TitleMore.vue"
const handleClick = (val) => {
console.log('val',val)
}
</script>3. Communication between brothers
- One way is for the parent component to act as a middleware between the two child components.
- Global event bus—EventBus (can be used for communication between brothers, grandsons, and any component)
3.1. Parent component acts as middleware
Suppose there are pages A, B, and C, where A and B are sibling components and C is the parent component.
A component
// A组件
<template>
<span class="pub-title">{
{ title }}</span>
</template>
<script setup>
const props = defineProps({
title: {
type: String,
default: "",
},
})
</script>B component
// B组件
<template>
<span class="pub-title" @click="onClick">12</span>
</template>
<script setup>
const emits = defineEmits(["click"])
const onClick = () => {
emits("click",'123')
}
</script>C component (parent component)
<template>
// A组件
<other :title="title" />
// B组件
<title-more @click="handleClick" />
</template>
<script setup>
import { ref } from "vue"
import TitleMore from "@components/TitleMore.vue"
const title = ref('')
const handleClick = (val) => {
title.value = val
console.log('val',val)
}
</script>3.2. Global event bus—EventBus
// 安装
npm install mitt -SCreate a newcommon folder inassets, then Create againevent-bus.js (this file is named according to your situation)
// event-bus.js
import mitt from "mitt";
const EventBus = mitt()
export default EventBusparent component
<template>
<span @click="onClick"></span>
</template>
<script setup>
import { ref } from "vue"
import EventBus from "@common/event-bus"
const onClick = () => {
EventBus.emit("p-click", '父传子文本信息');
}
</script>Subassembly
<template>
<span>{
{ text }}</span>
</template>
<script setup>
import { ref,onBeforeUnmount } from "vue"
import EventBus from "@common/event-bus"
const text = ref('')
// 第一种
EventBus.on('p-click', (val)=>{
text.value = val
console.log('获取的值val','val')
})
// 另一种写法
const funs = (xxx) =>{
console.log('接收的值为',xxx)
}
EventBus.on('p-click',funs)
EventBus.off('p-click',funs)
onBeforeUnmount(() => {
// 取消单个监听-第一种
EventBus.off('p-click')
// 全部取消
EventBus.all.clear()
})
</script>4. Communication between grandfather and grandson
- provide/inject
- EventBus
eventBusI have already mentioned it above, so I won’t go into it here. Let’s talk about itprovide/inject
parent component
import { reactive,provide,ref } from 'vue';
provide('page', ref('1'))
provide('user', reactive({
age: 11,
name: '张三'
}))Subassembly
import { inject } from 'vue';
const user = inject("user");
const page = inject("page");In the grandson component, no matter the value in any component changes, the values of both components will be updated responsively.
5. Any component, global
- provide/inject
- EventBus
- Vuex
- Pineapple
Extensions: