Vue 关于组件封装时父子组件通讯的三种方式

原创 已于 2023-10-19 15:19:52 修改 · 189 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2023-10-12 15:56:36 首次发布
本文介绍了在Vue中遵循单向数据源原则的三种方法：1)不推荐的直接修改props；2)使用v-model实现双向绑定，但可能遇到延迟响应问题；3)推荐的props+emits组合，确保数据流动的正确性。
主要是遵循vue的单向数据源规则，具体用什么方式取决于自己以及项目实际情况
如果是基本类型，可以使用比较简单直接的方法，这里三种方式主要是针对的对象，里面会包含多个参数

方式一：直接通过props直接修改子组件里的值（不推荐，因为通过子组件直接修改了props里的值，违反了单向数据源）

在子组件里定义props

父组件引入使用

方式二： 跟第一种方法其实做法是差不多的

在父组件里直接使用v-model进行双向绑定

子组件使用modelValue

ts部分

 这里其实set方法没有及时响应

template使用

方法三 ： 建议使用

使用的是props+emits

子组件

父组件使用 

vanora1111
关注
前端开发Vue手风琴组件三种实现方式详解：原生Vue、Element-UI与自定义指令的使用及封装方法
05-31
内容概要：本文详细介绍了Vue手风琴组件的三种实现方式及其组件封装方法。第一种是原生Vue实现，通过创建组件文件并在父组件中引入，利用`v-for`指令遍历`items`数组来渲染手风琴项，提供`toggleAccordion`方法控制...
awesome-github-vue-Vue.js组件封装实战教程
11-19
首先，教程可能会从Vue组件的基础知识入手，说明组件的基本结构和创建方式。接着，教程可能会着重于如何设计组件接口，包括定义props属性、事件、插槽以及如何通过这些接口与外部进行交互。组件的通信机制，如父子...
vue---组件通信
maidu_xbd的博客
04-23 455
组件间通信的三种方案：1、组件跨层级访问，2、依赖注入,3、透传（用于组件二次封装）
超详细的vue组件之间通讯的8种方式
weixin_70134200的博客
07-11 7025
想要深入了解 vue 组件之间的通讯，这一篇文章足矣，里面详细讲解了组织之间通讯的8种方式，一篇文章即可掌握组件通讯。
【Vue】 组件封装
热门推荐
小数点儿_
09-09 1万+
组件封装。父子组件间的数据传递。父组件通过 prop 将数据传递给子组件，子组件通过 emit 事件将子组件数据传递给父组件，子组件不能直接修改 prop 中传给父组件的值。子组件不能直接修改 prop 中的值。父组件通过 prop 把改变的值传到子组件中
vue 组件封装 以及父子组件相互传参
weixin_53159238的博客
01-10 502
2.$emit：子组件给父组件传参 this.$emit(‘a’, b),a子组件的方法例如：@a=“c”,b是参数子组件传给父组件的参数。在父组件c方法里面可以直接拿到b。3.$refs：是Vue的一个虚拟DOM,在引用子组件的时候可以定义一个ref ，就可以在父组件里给子组件的变量定义，有需求的话。1.props：写在子组件里面定义一些需要接受父组件传参的变量。
vue父子组件传值有几种方式?
qq_43071699的博客
08-13 1301
对于父组件向子组件传递数据Props是最常用和推荐的方法，适用于大部分场景。插槽适用于需要插入动态内容的场景，而提供/注入则用于解决深层次组件间的数据传递问题。对于子组件向父组件传递数据，使用自定义事件是最推荐的方式，它遵循Vue的单向数据流原则，使代码结构清晰，易于维护。对于跨组件或全局状态的管理，推荐使用 Vuex。在选择合适的方法时，应优先考虑组件间的解耦和代码的可维护性，避免过度使用全局状态或直接DOM操作，以保持应用的健壮性和可扩展性。
vue2组件的封装及父子传值
qq_45837267的博客
03-25 382
父子传参
Vue 2 组件封装全面指南
weixin_63043528的博客
11-02 1030
/ 组件配置选项return {})
vue 组件全局封装_vue组件封装指南
weixin_34965737的博客
12-29 1444
目录vue组件三要素props参数slot定制插槽event自定义事件基本用法在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 template 中写好 HTML 代码，一个简单的组件就完成了一个完整的组件，除了 template 以外，还有 script和 style子组件{{{myData}}export default {props:['dat...
Vue组件封装重要知识点
Vivien_CC的博客
04-01 1874
通常,父组件通过props向下传递数据给子组件，而子组件则通过事件$emit向上发送消息给父组件.有时，我们可能希望子组件能直接修改某些由父组件传递下来的props，而不需要显式地触发一个事件来通知父组件更新这些值。场景：当前，有一个多处使用的弹窗，里面的左半部分是动态变化的，右半部分是统一的，我们需要动态配置左边，所以可以把左边区域的整块内容挖空，在使用到dialog的地方通过插槽去配置。父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时，会通过$emit事件告诉父组件。
Vue.js组件封装实战教程.zip
11-17
组件封装则是指将特定的功能逻辑和视图封装到一个独立的单元中，这样在开发大型应用时可以降低各个部分之间的耦合度，提高代码的可维护性和可重用性。 组件封装实战教程中，首先会介绍Vue.js的基础知识，包括其响应...
mango-platform-Vue.js组件封装实战教程
12-06
本文是一份全面的Vue.js组件封装实战教程，涵盖了Vue.js在实际开发中的应用和组件封装的详细步骤。通过系统性地学习和实践，读者可以掌握如何利用Vue.js框架高效地开发和封装组件，进而在项目中重复使用这些组件，...
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 197
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
vue对接海康摄像头-H5player
林恒的博客
12-31 317
H5视频监控系统开发摘要 本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。
vue中 v-cloak指令
最新发布
KLW75
01-02 143
v-cloak指令用于隐藏尚未完成编译的DOM模板。有时会出现网络延迟或异步操作的情况，导致模板中的插值表达式内容并不一定能够及时被编译解析，网页中则会出现一部分未被解析的插值表达式，利用v-cloak指令，将指令中包含的内容先进行隐藏，当全部内容被解析编译完以后再显示，v-cloak指令不能单独使用，需要配合样式来实现。
从零搭建 Vue 移动端项目
萌新程序员的博客，觉得有用的可以点点关注
12-30 848
本文完整讲解了 Vue 移动端项目的搭建流程：从环境准备→项目创建→适配配置→UI 库集成→功能开发→打包发布，核心是解决移动端适配和交互问题。实际开发中可根据项目需求选择适配方案（rem/vw）、扩展更多功能（如支付、分享、定位），并结合 ESLint、Prettier 保证代码规范。掌握这套流程后，你可以快速搭建各类 Vue 移动端项目（电商、资讯、工具类 App），后续可深入学习 Vue 3 的组合式 API、Vite 优化、移动端性能调优等内容，提升项目体验。
Vue：defineProps、defineEmits、defineExpose 深度解析
Irene1991的博客
12-30 288
本文深度解析Vue3 <script setup> 语法中的三个核心编译器宏：defineProps、defineEmits 和 defineExpose。
[N_093]基于springboot,vue的宠物商城
2501_93638732的博客
12-31 334
本文介绍了一个基于SpringBoot+Vue的宠物商城系统，采用前后端分离架构。前端使用Vue框架，后端采用SpringBoot+MyBatis技术栈，数据库为MySQL5.7。系统功能包括：前台提供用户注册登录、商品搜索、订单管理等功能；后台实现用户管理、宠物分类、订单处理等管理功能。项目开发工具为IDEA和JDK1.8，包含完整的前后台功能模块，并配有演示视频和系统截图展示。该系统实现了宠物电商平台的核心业务流程和管理功能。
Vue组件封装实战：四大高效组件设计与实现
Vue组件封装是现代前端开发中极为关键的技术实践，尤其在使用Vue.js框架进行大规模项目开发时，良好的组件设计不仅能够显著提升代码的可维护性和复用性，还能大幅提高团队协作效率与开发速度。本文围绕“Vue组件封装...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值