AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

总结vue3中常用的组件间通信的方法

2024-08-12 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 总结vue3中常用的组件间通信的方法


1.1 props 的基本介绍：

  1. 定义 props：在子组件中，你需要定义一个 props 选项，列出你想要从父组件接收的所有属性。每个属性可以是一个字符串数组，或者是一个带有更多选项的对象，如类型 type、默认值 default 和是否必须 required。
  2. 传递 props：在父组件的模板中，你可以通过动态属性 v-bind 或简写为 : 来传递数据给子组件。
  3. 类型验证：你可以为 props 指定期望的类型，例如 String、Number、Array、Object 等。如果传入的数据类型不匹配，Vue 将在浏览器控制台发出警告。
  4. 默认值：可以为 props 提供一个默认值，如果父组件没有传递该属性，子组件将使用默认值。
  5. 必需性：通过设置 required 为 true，你可以指定一个 prop 是必需的。如果父组件没有传递这个必需的 prop，Vue 将在浏览器控制台发出警告。

1.2 示例

父组件

fater.vue

js

<template>
  <!-- 也可以直接将数据传递给子组件 -->
  <Child :user="user" :hobby="['篮球', '足球']" :iphone="123456789"></Child>
</template>
<script setup>
import { ref } from "vue"
import Child from "./components/child.vue";
// 可以在这里定义好数据, 上面指定
const user = {
    name: '小明',
    age: 18
}
</script>

子组件child.vue

js

<template>
    <h2>我是子组件 child.vue</h2>
    <h3>下方是接收来自父组件的数据</h3>
    <div>
        {{ user.name }}
    </div>
    <div>
        {{ user.age }}
    </div>
    <ul>
        <li v-for="item in hobby">{{ item }}</li>
    </ul>
    <div>手机号 {{ iphone }}</div>
</template>
<script setup>
import { ref } from "vue"
defineProps({
    // 对象
    user: {
        type: Object,
        required: true
    },
    // 数组
    hobby: {
        type: Array, // 类型
        default: [], // 默认值
        required: true // 必须,如果父组件不传入, 虽然不会导致报错, 但浏览器会有警告
    },
    // 字符串
    iphone: {
        type: String
    }
});
</script>

页面效果

image.png

2. $emit

子组件将数据传递给父组件

2.1 emit 的基本用法：

  1. 注册事件：在子组件中，你可以使用 defineEmits 函数来声明一个或多个自定义事件。
  2. 触发事件：在子组件的逻辑中，你可以调用 emit 函数并传递事件名称和一个或多个参数。这些参数将被作为事件的数据传递给父组件。
  3. 监听事件：父组件可以在模板中通过 v-on 或简写为 @ 来监听子组件触发的事件，并定义一个事件处理函数来接收这些数据。

2.2 代码示例

子组件 child.vue

js

<template>
    <div>
        <button @click="handleClick">发送给父组件数据</button>
    </div>
</template>
<script setup>
import {ref} from 'vue'
// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。
const emit = defineEmits(['changeMsg'])
// 定义好要传递给父组件的数据
const data = ref("这是子组件的数据")
function handleClick() {
    //    注册事件名字 以及传递给父组件的参数
    emit('changeMsg', data.value)
}
</script>

父组件 father.vue

js

<template>
  <h1>来自子组件的数据:<span style="color: red;">{{ dataFromChild }}</span></h1>
  <!-- 这里的自定义事件名字 需要和子组件注册的名字保持一致 -->
  <Child @changeMsg="getDataFromChild" />
</template>
<script setup>
import { ref } from 'vue'
import Child from './components/child.vue'
const dataFromChild = ref("默认值")
const getDataFromChild = (data) => {
  console.log(data); // 这里可以拿到子组件传过来的数据
  dataFromChild.value = data // 将子组件拿到的数据 赋值给父组件的变量值
}
</script>

效果:

image.png

image.png

3. provide 提供 和 inject 注入

3.1 依赖注入基本介绍

一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。 ---> 引自官方

provide() 函数接收两个参数。第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值。

image.png

3.2 示例代码

父组件

js

<template>
  <div>
    <Child></Child>
    <br>
    <Child1></Child1>
  </div>
</template>
<script setup>
import {ref,provide} from 'vue'
import Child from './components/child.vue';
import Child1 from './components/child1.vue';
// 可以提供多个值
provide('data',{
  msg: ref('hello.this message from parent component'),
  count: ref(0)
})
// 也可以提供单个值
provide("test","hello this is test")
</script>

子组件1

js

<template>
    子组件2:这是来自父组件的数据 : <span style="color:red">{{ data.msg }}</span> count : {{ data.count }}
    <br>
    test:{{ test }}
</template>
<script setup>
import { ref, inject } from "vue"
// 父组件 使用inject 接收子组件provide 传递过来的数据
const data = inject('data')
const test = inject('test')
</script>

子组件2

js

<template>
    子组件2:这是来自父组件的数据 :  <span style="color:red">{{ data. msg}}</span> count : {{ data.count }}
    <br>
    test:{{ test }}
</template>
<script setup>
import { ref, inject } from "vue"
// 父组件 使用inject 接收子组件provide 传递过来的数据
const data = inject('data')
const test = inject('test')
</script>

解释:

父组件通过将自身的数据使用provide 提供给所有子组件, 子组件可以使用inject方法接收父组件向外提供的值. 注意 provide 和 inject 的注入名需保持一致, 这样才可以正常接收到数据

效果图:

image.png

4. ref 和 defineExpose

4.1 基本介绍

defineExpose 是一个在 <script setup> 中使用的 API，它允许组件显式地暴露其数据或方法，使得这些数据和方法可以在组件的外部被访问。

4.2 代码示例

子组件

我们通过defineExpose 方法将子组件的变量 和 方法向外暴露

js

<template>
</template>
<script setup>
import { ref } from "vue"
const data = ref("我是子组件内部的数据")
const updataData = () => {
    data.value = "更新子组件内部的数据"
}
// 将组件内部的一些函数或数据暴露给父组件
defineExpose({
    data,
    updataData
})
</script>

父组件

通过ref 拿到子组件的实例

js

<template>
  <div>
    <Child ref="child" />
    <button @click="updateMsg">更新子组件数据</button>
    这是来自子组件的数据:  <span style="color: red;">{{  mes }}</span>
  </div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import Child from './components/child.vue'
// 通过ref 获取到子组件的实例
const child = ref(null)
const mes = ref("")
const updateMsg = () => {
    child.value.updataData()
    mes.value = child.value.data
}
onMounted(() => {
  // 确保子组件已经挂载
  if (child.value) {
    console.log(child.value.data); // 访问子组件暴露的 data
    mes.value = child.value.data
  }
})
</script>

子组件的实例

image.png

效果:

image.png

调用子组件暴露的方法,父组件点击按钮之后, 执行子组件的那个更新数据的方法

image.png

5. pinia

5.1 介绍

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

5.2 使用

安装pinia

shell

pnpm add pinia

第二步: 初始化pinia store

创建 Pinia Store

创建一个 userStore.js 文件,用来存放关于用户信息。一般都是在在 src/stores/ 目录中.

image.png

初始化储存库代码

js

// 导入 defineStore 函数，这是创建 Pinia Store 的关键函数
import { defineStore } from 'pinia'
// 使用 defineStore 函数创建一个名为 'user' 的 store
// 这个 store 将包含用户的信息，如姓名、年龄和爱好
export const useUserStore = defineStore('user', {
    // state 函数返回一个对象，这个对象包含了该 store 的响应式状态
    state: () => ({
        name: "张三", // 用户的名字
        age: 20, // 用户的年龄
        hobby: ["吃饭", "睡觉", "打豆豆"], // 用户的爱好列表
    }),
    // actions 对象包含了一系列可以修改 state 的方法
    actions: {
        // setName 方法用于设置用户的姓名
        setName(name) {
            this.name = name
        },
        // setAge 方法用于设置用户的年龄
        setAge(age) {
            this.age = age
        },
        // setHobby 方法用于设置用户的爱好列表
        setHobby(hobby) {
            this.hobby = hobby
        },
    },
    // getters 对象包含了一系列的计算属性，用于从 state 中派生出一些状态
    getters: {
        // getHobby 函数是一个 getter，它返回 state 中的 hobby 状态
        getHobby(state) {
            return state.hobby
        }
    }
})
// 注意：在 Pinia 中，state 的修改是直接进行的，不需要像 Vuex 那样使用 mutations

在main.js入口文件注册Pinia

js

import './style.css'
import { createApp } from 'vue'
// 创建一个 pinia 实例 (根 store) 并将其传递给应用
+ import { createPinia } from 'pinia'
+ const pinia = createPinia()
import App from './App.vue'
const app = createApp(App)
+ app.use(pinia)
app.mount('#app')

其他组件使用useUserStore里面的数据

子组件

js

<template>
  <div style="width: 200px; height: 200px; background-color: pink;"> 
    <h1>子组件</h1>
    姓名: <span style="color:red">{{ userStore.name }}</span><br>
    年龄: <span style="color:red">{{ userStore.age }}</span>
  </div>
</template>
<script setup>
// 引入userStore
import { useUserStore } from '../store/userStore'
const userStore = useUserStore()
</script>

父组件

js

<template>
  <div style="width: 500px; height: 500px; background-color: skyblue;">
    <Child></Child>
    <h1>父组件 </h1>
    <li v-for="(item,index) in userUser.hobby" :key="index">{{ item }}</li>
  </div>
</template>
<script setup>
import Child from './components/child.vue'
import { useUserStore} from './store/userStore.js'
const userUser = useUserStore()
</script>

效果

image.png

6. mitt

6.1 介绍

Mitt 是一个简单、轻量级的 JavaScript 事件发射器库，它允许你在任何地方发布和监听事件，而无需关心对象之间的直接关系。Vue 3 不再内置事件总线（Event Bus），因此可以使用 Mitt 或其他类似库来实现组件间的通信。

6.2 使用

步骤 1: 安装 Mitt

首先，需要安装 Mitt。可以通过 npm 或 yarn 来安装：

sh

复制

csharp

npm install mitt
# 或者
yarn add mitt
# or
pnpm add mitt

步骤 2: 创建 Mitt 实例

创建一个 Mitt 实例，在src文件夹下创建utils文件夹，然后在utils文件夹下创建eventBus.js文件，eventBus.js文件内容如下：

js

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

步骤 3: 在组件中发布事件

在需要发布事件的组件中，导入 Mitt 实例并使用 emit 方法发布事件。

js

<template>
  <button @click="sendMessage">发送信息</button>
</template>
<script setup>
import emitter from '../utils/eventBus.js'
const data = {
  msg: '子组件的数据',
  count: 0,
  type: "success"
}
function sendMessage() {
  // 发布事件
  emitter.emit('message', data)
}
</script>

步骤 4: 在其他组件中监听事件

在其他组件中，导入 Mitt 实例并使用 on 方法监听事件。

js

<template>
  <Child></Child>
  <p>{{ result.msg}}</p><br>
  <p>{{ result.count}}</p>
  <p>{{ result.type}}</p>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import emitter from './utils/eventBus'
import Child from './components/child.vue';
const result = ref({})
onMounted(() => {
  emitter.on('message', (data) => {
    console.log('message', data);
    result.value = data
  })
})
onBeforeUnmount(() => {
  emitter.off('message')
})
</script>

当我们点击发布事件的那个按钮,就会成功发布一个名为message的事件,然后在其他组件里面使用on 进行监听该事件.

6.3 效果

image.png

image.png

7. 结语

通过这次的demo练习, 对于不同的情况组件通信的方式有了更全面的认识.我们在日常开发当中, 需根据具体情况,选择对应的通信方案.


文章标签：
JavaScript
Shell
前端开发
资源调度
API
关键词：
组件通信VUE.js
vue3组件VUE.js
组件方法VUE.js
方法VUE.js
vue3组件方法VUE.js
孙飞i
目录
相关文章
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
21 5
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
18 4
CamilleKing
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
36 1
CamilleKing
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
36 1
我是快乐的嘟嘟
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
66 26
html的七十二变
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
25 8
html的七十二变
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
18 7
html的七十二变
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
22 5
游客ady5kpv352g3u
|
5天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
15 3
游客ady5kpv352g3u
|
5天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
13 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    自制简单的range（Vue）
  • 4
    vite原理之解析.vue文件
  • 5
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 10
    Vue+ElementUI 搭建后台管理系统（实战系列八）
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    213
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1140
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    473
  • 8
    【vue】 vue2 监听滚动条滚动事件
    144
  • 9
    【天地图】vue 天地图 T is not defined
    176
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    616

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件
    • 下一篇
    阿里云OSS设置跨域访问