目录

前言:目前组件通信方法有好多种,我这挑选一部分来讲

1、父传子

2、子传父

3、兄弟之间通信

3.1、父组件充当中间件

3.2、全局事件总线—EventBus

4、爷孙之间通信

5、任意组件、全局


前言:目前组件通信方法有好多种,我这挑选一部分来讲

方案父传子子传父
props / emitspropsemits
v-model / emitsv-modelemits
ref / emitsrefemits
provide / injectprovideinject
EventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)
Vuex作用于全局作用于全局
pinia作用于全局作用于全局

1、父传子

主要用到props属性传递,父组件通过自定义属性给子组件传值,子组件用props接收

示例:

子组件 TitleMore.vue

// 子组件{{ title }}// defineProps 可以直接使用,不需要另外引入/** * @property {String} title标题 */const props = defineProps({title: {type: String,default: "",},})

父组件

import TitleMore from "@components/TitleMore.vue"

2、子传父

子组件

// 子组件{{ title }}// defineEmits 可以直接使用,不需要另外引入const emits = defineEmits(["click"])const onClick = () => {emits("click",'123')}

父组件

import TitleMore from "@components/TitleMore.vue"const handleClick = (val) => {console.log('val',val)}

3、兄弟之间通信

  • 一种方法是父组件允当两个子组件之间的中间件
  • 全局事件总线—EventBus(可以用于兄弟、爷孙、任意组件通信)

3.1、父组件充当中间件

假设有A、B、C页面,其中A、B为兄弟组件、C为父组件

A组件

// A组件{{ title }}const props = defineProps({title: {type: String,default: "",},})

B组件

// B组件12const emits = defineEmits(["click"])const onClick = () => {emits("click",'123')}

C组件(父组件)

// A组件// B组件import { ref } from "vue"import TitleMore from "@components/TitleMore.vue"const title = ref('')const handleClick = (val) => {title.value = valconsole.log('val',val)}

3.2、全局事件总线—EventBus

// 安装npm install mitt -S

assets新建个common文件夹,接着再创建event-bus.js(这个文件命名根据你们的情况来定)

// event-bus.jsimport mitt from "mitt";const EventBus = mitt()export default EventBus

父组件

import { ref } from "vue"import EventBus from "@common/event-bus"const onClick = () => {EventBus.emit("p-click", '父传子文本信息');}

子组件

{{ text }}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()})

4、爷孙之间通信

  • provide/inject
  • EventBus

eventBus上述有讲过这里就不讲了,讲一下provide/inject

父组件

import { reactive,provide,ref } from 'vue';provide('page', ref('1'))provide('user', reactive({age: 11,name: '张三'}))

子组件

import { inject } from 'vue';const user = inject("user");const page = inject("page");

爷孙组件无论任何一个组件内的值发生改变,两个组件的值都会进行响应式的数据更新。

5、任意组件、全局

  • provide/inject
  • EventBus
  • Vuex
  • Pinia

扩展:

vue2/vue3 EventBus事件总线(用于组件通信)

vue2/vue3 Provide和Inject使用方式​​​​​​​