一个全面的Vue 3组件通信演示展示

mengfei-super2024-11-29 10:50

✍️ 记录

一、Vue2 中组件通信方式

  • props: 实现父子组件、子父组件、甚至兄弟组件通信
  • 自定义事件: 可以实现子父组件通信
  • 全局事件总线$bus: 可以实现任意组件通信
  • pubsub: 发布订阅模式实现任意组件通信
  • vuex: 集中状态管理容器，实现任意组件通信
  • ref: 父组件获取子组件实例 VC，获取子组件的响应式数据及方法
  • slot: 插槽(默认插槽、 具名插槽、 作用域插槽) 实现父子组件通信

二、Vue3 中组件通信方式

1. Props

Props 是 Vue3 中实现父组件向子组件传递数据的主要方式，和 Vue2 的用法类似，但在 Vue3 中对 props 的类型检测和功能扩展更加强大。

基本用法：

复制代码

js

代码解读

复制代码

<!-- Parent --> 
<script setup lang="ts">
 import { ref } from 'vue'
 import Child from './components/Child.vue'
 const msg = ref('Hello from Parent')
 const count = ref(0)
 const userInfo = ref({ name: 'Zhang San', age: 18, })
 function increment() { count.value++ } 
</script> 
<template>
 <div class="props-demo">
 <h2>Props 传值示例(readonly)</h2>
 <div class="parent">
   <h3>父组件数据：</h3>
   <p>消息：{{ msg }}</p>
   <p>计数：{{ count }}</p>
   <p>用户：{{ userInfo.name }} - {{ userInfo.age }}岁</p>
   <button class="btn" @click="increment">计数+1</button>
 </div>
 <Child :message="msg" :counter="count" :user="userInfo" />
 </div>
</template>
复制代码

js

<!-- Children --> 
<script setup lang="ts">
 interface Props {
   message?: string counter?: number user?: { name: string age: number }
 }
 defineProps <Props>() 
</script>
<template>
 <div class="child">
   <h3>子组件接收到的数据：</h3>
   <p>消息：{{ message }}</p>
   <p>计数：{{ counter }}</p>
   <p>用户：{{ user?.name }} - {{ user?.age }}岁</p>
 </div> 
</template>

Note:

  • props 的核心是单向数据流，父组件的数据可以通过 props 传递给子组件，但子组件不能直接修改这些数据。
  • 如果子组件需要修改数据，通常会通过事件通知父组件，然后由父组件更新数据。
2. 自定义事件

在 Vue 框架中，事件分为两种，一种是原生的 DOM 事件，另一种是自定义事件 原生 DOM 事件可以让用户与网页进行交互，比如 click, change, mouseenter, mouseleave 等 自定义事件可以实现子组件给父组件传递数据。

自定义事件的基本用法：

在 Vue2 中，子组件通过 $emit 触发事件，父组件通过监听这些事件获取数据。在 Vue3 中，依然可以使用 emits 声明触发的自定义事件，

复制代码

js

代码解读

复制代码

<!-- Parent --> 
<script setup lang="ts">
 import { ref } from 'vue'
 import Child from './components/Child.vue'
 const count = ref(0)
 const message = ref('')
 function handleIncrement(step: number) { count.value += step }
 function handleSendMsg(msg: string) { message.value = msg } 
</script> 
<template>
 <div class="custom-event-demo">
   <h2>自定义事件示例</h2>
   <div class="parent">
     <h3>父组件数据：</h3>
     <p>计数：{{ count }}</p>
     <p>收到的消息：{{ message }}</p>
   </div>
   <Child @increment="handleIncrement" @send-message="handleSendMsg" />
 </div>
</template>
复制代码

js

代码解读

复制代码

<!-- Children --> 
<script setup lang="ts"> 
  const emit = defineEmits<{ increment: [step: number] 
        sendMessage: [msg: string] }>() 
  function sendMsg() { emit('sendMessage', 'Hello from Child') } 
</script> 
<template> 
  <div class="child">
   <h3>子组件：</h3>
   <button class="btn" @click="emit('increment', 1)"> 通知父组件+1 </button>
   <button class="btn" @click="emit('increment', 2)"> 通知父组件+2 </button>
   <button class="btn" @click="sendMsg"> 发送消息 </button>
  </div> 
</template>

Note:

  • 在 Vue2 中，组件上的所有事件，无论是原生 DOM 事件还是子组件触发的自定义事件，都会被自动绑定到组件实例上。这意味着即使是常见的 @click 事件，在 Vue2 中也是通过自定义事件实现的。
复制代码

js

代码解读

复制代码

<ChildComponent @click="handleClick" />

  • 在 Vue3 中，事件的行为更加清晰和规范化：

    • 原生 DOM 事件：直接绑定到组件的根元素上，例如 @click 默认会绑定为 DOM 的 click 事件。

    • 自定义事件：需要声明

      js

      <ChildComponent @click="handleClick" />

这里的 @click 默认绑定为子组件根元素的 DOM 事件，而不是子组件的自定义事件。

3. 全局事件总线

全局事件总线可以实现任意组件通信，在 vue2 中可以根据 VM 与 VC 关系推出全局事件总线。 但是在 vue3 中没有 Vue 钩子函数，也就没有 Vue.prototype，同时组合式 API 写法没有 this，如果想在 Vue3 中使用全局事件总线可以使用 mitt 插件实现。

全局事件总线是 Vue2 中实现任意组件间通信的一种常用方式。通过将一个 Vue 实例作为事件中心，可以在组件之间进行事件的发布和订阅，从而实现解耦的通信模式。

在 Vue2 中，全局事件总线通常通过 Vue.prototype 实现，将一个 Vue 实例挂载到原型上：

复制代码 
js

// main.js Vue.prototype.$bus = new Vue()

在 Vue3 中使用 mitt实现全局实现总线

复制代码 
js

// src/utils/eventBus.js import mitt from 'mitt' export const eventBus = mitt()

Vue2 和 Vue3 使用对比

  • 事件发布：

    js

    // vue2 this.bus.emit('custom-event', payload)
    // vue3 import { eventBus } from '@/utils/eventBus'
    eventBus.emit('custom-event', { key: 'value' })

  • 事件订阅：

    js

    // vue2
    this.bus.on('custom-event', (payload) => { console.log('收到数据：', payload) })

    // vue3
    import { eventBus } from '@/utils/eventBus'
    eventBus.on('custom-event', (payload) => { console.log('收到数据：', payload) })

  • 事件销毁：

    js

    // vue2
    this.bus.off('custom-event')

    // vue3
    import { eventBus } from '@/utils/eventBus'
    eventBus.off('custom-event')

4. v-model

v-model 是 Vue 中一种非常常见的双向数据绑定方式，主要用于父子组件之间的通信。在 Vue2 中，v-model 本质上是一个语法糖，绑定了一个 value 属性并监听 input 事件。 在 Vue3 中，v-model 进行了重大改进，支持多个绑定和自定义绑定名称。

Vue2 中的 v-model

在 Vue2 中，v-model 等价于：

js


<!-- 父组件 --> 
<ChildComponent v-model="message" /> 
<!-- 等价于 --> 
<ChildComponent :value="message" @input="message = $event" />

Vue3 中的 v-model 改进:

  • 在 Vue3 中，v-model 不再默认绑定 value 和监听 input，而是需要显式声明绑定的 prop 和 event 名称：

    js

    <ChildComponent v-model="message" /> <template> </template>

  • 支持多个 v-model： Vue3 支持通过自定义名称同时绑定多个 v-model：

    js

    <ChildComponent v-model:title="title" v-model:content="content" /> <template> <textarea :value="content" @input="$emit('update:content', $event)" /> </template>
5. useAttrs

在 Vue3 中，useAttrs 是组合式 API 提供的一个工具，用于处理非 props 的属性（即未在组件 props 中显式声明的属性）。这些属性通常会通过组件传递到组件的根节点，或需要显式获取以传递给子组件。

useAttrs 提供了一种灵活的方式，使开发者可以动态访问并处理这些非 props 的属性。

使用 useAttrs 可以显式获取这些非 props 的属性，以便动态处理或传递给其他元素或子组件：

js


<!-- Parent --> 
<MyButton type="primary" size="large" :disabled="false" @click="showMessage('info')" > Primary Button </MyButton> 

<!-- Children --> 
<ElButton v-bind="attrs"> <slot /> </ElButton>

这在构建通用组件时非常有用，例如表单组件库，可以通过 useAttrs 让组件动态适配各种传入属性。

Note:

  • 在 Vue3 中，当父组件同时通过 props 和非 props 属性（即 useAttrs 捕获的属性）传递数据到子组件时，props 的优先级更高。这是因为 props 是组件明确声明的属性，Vue 会优先将它们绑定到组件中指定的 props 上，而未声明的属性则会被归为 attrs，由 useAttrs 捕获。
6. ref 与$parent
  • ref 的用法

在 Vue3 中，ref 仍然是父组件获取子组件实例的主要方式，但实现方式有所优化。通过在父组件中为子组件添加 ref，可以访问子组件的实例，从而调用其方法或获取数据。

  • $parent 的用法

$parent 是 Vue 提供的一种访问父组件实例的方式。通过 $parent，子组件可以直接调用父组件的方法或访问父组件的数据。但需要注意，过多使用 $parent 可能会增加组件之间的耦合性。

复制代码 
js


<!-- Parent --> 
<script setup lang="ts"> 
  import { ref } from 'vue' 
  import Child from './components/Child.vue' 
  const childRef = ref() 
  const count = ref(0) 
  function increment() { count.value++ } 
  function callChildMethod() { childRef.value?.showMessage('来自父组件的消息') } 
  defineExpose({ increment, }) 
</script> 
<template> 
  <div class="ref-demo"> 
    <h2>ref、$parent示例</h2> 
    <div class="parent"> 
      <h3>父组件：</h3> 
      <p>计数：{{ count }}</p> 
      <button class="btn" @click="increment"> 计数+1 </button> 
      <button class="btn" @click="callChildMethod"> 调用子组件方法 </button> 
    </div> 
    <Child ref="childRef" :counter="count" /> 
  </div> 
</template>

js

<!-- Children --> 
<script setup lang="ts"> 
import { ElMessage } from 'element-plus' 
defineProps<{ counter: number }>() 
function showMessage(msg: string) { ElMessage.success(msg) } 
function handleParentIncrement($parent: any) { 
  // 通过 $parent 调用父组件方法 $parent.increment() ElMessage.info('已调用父组件的 
      increment 方法') 
} 
defineExpose({ showMessage, }) 
</script> 
<template> 
  <div class="child"> 
    <h3>子组件：</h3> 
    <p>从父组件接收的计数：{{ counter }}</p> 
    <button class="btn" @click="handleParentIncrement($parent)"> 通过$parent调用父组件 
     方法 </button> 
  </div> 
</template>
7. provide 与 inject

provide 和 inject 是 Vue 提供的一种跨层级组件通信方式，常用于祖先组件向任意深度的后代组件传递数据，而无需手动逐层通过 props 和 emit 进行传递。这种方式非常适合数据共享和解耦的场景，特别是在大型项目中。

  • Provide (提供数据)

祖先组件通过 provide 提供数据，供后代组件使用。

js


<!-- Parent --> 
<template> 
  <ChildComponent /> 
</template> 
<script setup> 
  import { provide } from 'vue'; 
  provide('message', '来自祖先组件的消息'); 
</script>
    1. Inject (注入数据)

后代组件通过 inject 注入祖先组件提供的数据。

js

<!-- Children --> 
<template> 
  <p>{{ message }}</p> 
</template> 
<script> 
  import { inject } from 'vue'; 
  const message = inject('message');
</script>
7. pinia

Pinia 是 Vue3 的官方状态管理库，是 Vuex 的轻量化和现代化替代方案。Pinia 提供了简单、直观的 API 和响应式的数据管理能力，适合解决跨组件通信和全局状态管理的问题。与 Vuex 相比，Pinia 的使用更加灵活，并充分利用了 Vue3 的组合式 API 和 Proxy 特性。

定义和使用 Store

js

// src/stores/module/counter.js 
import { defineStore } from 'pinia' 
export const useCounterStore = 
      defineStore('counter', { state: () => ({ count: 0, name: 'Pinia', }), 
      getters: { doubleCount: (state) => state.count * 2, }, 
      actions: { increment() { this.count++ }, }, })

  • state：存储响应式数据。

  • getters：类似于计算属性，用于派生状态。

  • actions：定义业务逻辑，用于修改状态或执行异步操作。

    js
    <template>


    Count: {{ counter.count }}


    Double Count: {{ counter.doubleCount }}


    <button @click="counter.increment">Increment</button>

    </template>

    <script> import { useCounterStore } from '@/stores/module/counter'; const counter = useCounterStore(); // 引入 Store </script>
8. 插槽

插槽的分类

Vue 中的插槽分为以下几种类型：

    1. 默认插槽
    • 父组件直接在子组件标签中插入内容，子组件使用 slot 标签渲染这些内容。
    1. 具名插槽
    • 通过指定名称区分多个插槽，以便父组件为不同的插槽传递不同内容。
    1. 作用域插槽
    • 父组件可以从子组件获取上下文数据，并动态渲染内容。
  1. 默认插槽

默认插槽是最基本的插槽形式，父组件传递的内容会直接插入到子组件中的 slot 标签处。

js

<!-- 子组件 --> 
<template> 
  <div> 
    <slot>默认内容</slot> 
<!-- 如果父组件未传递内容，则显示默认内容 --> 
  </div> 
</template>

js

<!-- 父组件 --> 
<template> 
  <ChildComponent> 
    <p>这是默认插槽的内容</p> 
  </ChildComponent> 
</template>
  1. 具名插槽

具名插槽允许子组件定义多个插槽，通过 name 属性区分，父组件可针对不同插槽传递内容。

js

<!-- 子组件 -->
 <template> 
  <header> 
    <slot name="header">默认标题</slot> 
  </header> 
  <main> 
    <slot>默认内容</slot> 
  </main> 
  <footer> 
    <slot name="footer">默认页脚</slot>
  </footer> 
</template>

js
<!-- 父组件 -->
<template> 
  <ChildComponent> 
  <template #header> 
    <h1>自定义标题</h1> 
  </template> 
  <template #footer> 
    <p>自定义页脚</p> 
  </template> 
  </ChildComponent> 
</template>
  1. 作用域插槽

作用域插槽用于将子组件的内部数据传递到父组件，由父组件决定如何渲染这些数据。

<!-- 子组件 --> 
<template> 
  <div> 
    <slot :data="info"></slot> 
  </div> 
</template> 
<script> 
  const info = ref({ message: '这是作用域插槽的数据' }); 
</script>


<template> 
  <ChildComponent> 
  <template #default="{ data }"> 
    <p>{{ data.message }}</p> 
  </template> 
  </ChildComponent> 
</template>

三、总结

Vue3 组件通信方式总览：

  1. 父子通信

    • Props (父 -> 子)
    • Emits (子 -> 父)
    • v-model (双向绑定)
    • ref/expose (父访问子)
    • $parent (子访问父)

  2. 跨层级通信

    • provide/inject (祖先 -> 后代)
    • 插槽 (父 -> 子内容分发)
      • 默认插槽
      • 具名插槽
      • 作用域插槽

  3. 全局通信

    • Pinia (状态管理)
    • mitt (事件总线)

选择建议：

  • 父子组件优先用 props/emits
  • 深层嵌套用 provide/inject
  • 复杂状态管理用 Pinia
  • 临时跨组件通信用 mitt
相关推荐
Lee_Yu_Fan2 分钟前
vue3 + vite + antdv 项目中自定义图标
前端·vue.js·svg图标
我不当帕鲁谁当帕鲁4 分钟前
arcgis for js点击聚合要素查询其包含的所有要素
前端·javascript·arcgis
花下的晚风10 分钟前
vue3 与 spring-boot 完成跨域访问
vue.js·spring boot
shawya_void13 分钟前
javaweb-day03-前端零碎
前端
灰色人生qwer30 分钟前
webpack 项目访问静态资源
前端·webpack·node.js
看到请催我学习35 分钟前
js判断空对象
开发语言·前端·javascript·json
沉默是金~1 小时前
Vue+Elementui el-tree树只能选择子节点并且支持检索
javascript·vue.js·elementui
0_11 小时前
让你的网页变的高大上：国际化Vue-i18n
前端·javascript·vue.js
谷隐凡二1 小时前
fiddler安卓雷电模拟器配置踩坑篇
前端·测试工具·fiddler
热门推荐
01Docker 夺命连环 15 问02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04如何识别手机是否有灵动岛（dynamic island）05玄机平台应急响应—webshell查杀06PyTorch机器学习实现液态神经网络07文件或文件夹名称中有空格如何批量去除08软件工程从理论到实践客观题汇总(头歌第一章至第八章)09Coze扣子平台完整体验和实践（附国内和国际版对比）10基于微信小程序的自习室预约系统的设计与实现