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

主要是遵循vue的单向数据源规则,具体用什么方式取决于自己以及项目实际情况
如果是基本类型,可以使用比较简单直接的方法,这里三种方式主要是针对的对象,里面会包含多个参数

方式一:直接通过props直接修改子组件里的值(不推荐,因为通过子组件直接修改了props里的值,违反了单向数据源)

在子组件里定义props

父组件引入使用

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

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

子组件使用modelValue

ts部分

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

template使用

方法三 : 建议使用

使用的是props+emits

子组件

父组件使用

相关推荐
Yuroo zhou10 小时前
石油钻井、HDD、采矿:不同工况下,如何抉择您的陀螺定向短节?
前端·科技·硬件架构·钻井·采矿
shmily麻瓜小菜鸡10 小时前
Element Plus 的 <el-table> 怎么点击请求后端接口 tableData 进行排序而不是网络断开之后还可以自己排序
前端·javascript·vue.js
二川bro11 小时前
第38节:WebGL 2.0与Three.js新特性
开发语言·javascript·webgl
xiaoxue..11 小时前
深入理解 JavaScript 异步编程:从单线程到 Promise 的完整指南
前端·javascript·面试·node.js
MediaTea11 小时前
Python 第三方库:Markdown(将文本渲染为 HTML)
开发语言·前端·python·html
t***D26411 小时前
前端构建工具缓存策略,contenthash与chunkhash
前端·缓存
一 乐11 小时前
游戏助手|游戏攻略|基于SprinBoot+vue的游戏攻略系统小程序(源码+数据库+文档)
数据库·vue.js·spring boot·后端·游戏·小程序
倚肆11 小时前
HTMLElement 与MouseEvent 事件对象属性详解
前端·javascript
青衫码上行11 小时前
【Java Web学习 | 第12篇】JavaScript(6)DOM
java·开发语言·前端·javascript·学习
毕设十刻12 小时前
基于Vue的鲜花销售系统33n62(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js