位置: IT常识 - 正文

vu3中的父子组件通讯(vue3父子组件通信)

编辑:rootadmin
一、传统的props 通过在父组件中给子组件传值,然后在子组件中通过props接受数据 1 //父组件 2 <ValidateInput 3 type="text" 4 v-model="emailVal" 5 :rules='emailRules' 6 placeholder='请输入邮箱地址' ...

推荐整理分享vu3中的父子组件通讯(vue3父子组件通信),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:父子组件v-model,vue父子组件v-model,父子组件v-model,vue父子组件是什么,vue父子组件是什么,vue父子组件mounted顺序原因,父子组件v-model,vue3父子组件,内容如对您有帮助,希望把文章链接给更多的朋友!

一、传统的props

通过在父组件中给子组件传值,然后在子组件中通过props接受数据

1 //父组件 2 <ValidateInput 3 type="text" 4 v-model="emailVal" 5 :rules='emailRules' 6 placeholder='请输入邮箱地址' 7 ref="inputRef" 8 > 9 </ValidateInput>10 11 //子组件12 export default defineComponent({13 name: 'ValidateInput',14 props: {15 rules: Array as PropType <RulesProp>,16 modelValue: String17 },18 }

二、通过modeValue绑定

//v-model简写<ValidateInput type="text" v-model="emailVal" placeholder='请输入邮箱地址' ref="inputRef" ></ValidateInput>//实际上是<ValidateInput type="text" :emailVal="emailVal" @update:modelValue="方法" placeholder='请输入邮箱地址' ref="inputRef" ></ValidateInput>//子组件<template> <div class="inputItem"> <input type="text" :value="inputRef.val" @input="updateValue" id="emial" > </div></template>export default defineComponent({ name: 'ValidateInput', props: { rules: Array as PropType <RulesProp>, modelValue: String }, setup (props, context) { const inputRef = reactive({ val: props.modelValue || '', isError: false, message: '' }) const updateValue = (e:KeyboardEvent) => { const targetValue = (e.target as HTMLInputElement).value inputRef.val = targetValue context.emit('update:modelValue', targetValue) } return { inputRef, updateValue } }vu3中的父子组件通讯(vue3父子组件通信)

三、事件广播(vue3中$on和$emit已废弃),使用新的插件mitt

Vue3.0版本中把on,off、onece等事件函数移除了,emit()用于父子组件之间的沟通。

为了能够使用事务总线,除了emit触发函数还得有on监听函数。官方推荐使用第三方库mitt

因此事务总线的使用应该为

首先安装第三方库mitt

npm install --save mitt

然后在程序中使用事件总线:

1 //父组件接受'form-item-created'频道 2 <script lang="ts"> 3 import { defineComponent, onUnmounted } from 'vue' 4 import mitt from 'mitt' 5 export const emitter = mitt() 6 export default defineComponent({ 7 name: 'ValidateForm', 8 setup () { 9 const callback = (test: string) => {10 console.log(test)11 }12 emitter.on('form-item-created', callback)13 onUnmounted(() => {14 emitter.off('form-item-created', callback)15 })16 return {}17 }18 })19 </script>20 21 //子组件发送信息22 onMounted(() => {23 console.log(inputRef.val)24 emitter.emit('form-item-created', inputRef.val)25 })
本文链接地址:https://www.jiuchutong.com/zhishi/310310.html 转载请保留说明!

上一篇:Java集合框架之List(java集合框架主要有)

下一篇:js如何自定义构造函数创建对象(js 自定义类型)

  • iqoo neo3屏幕尺寸(iqoo neo3屏幕多大)

    iqoo neo3屏幕尺寸(iqoo neo3屏幕多大)

  • 苹果11微信怎么置顶(苹果11微信怎么清理缓存和垃圾清理)

    苹果11微信怎么置顶(苹果11微信怎么清理缓存和垃圾清理)

  • 饿了么差评怎么删(饿了么差评怎么可以查到哪位顾客给的)

    饿了么差评怎么删(饿了么差评怎么可以查到哪位顾客给的)

  • 抖音取消关注会不会影响账号权重(抖音取消关注会影响播放量吗)

    抖音取消关注会不会影响账号权重(抖音取消关注会影响播放量吗)

  • 收藏的语音消息不能转发怎么办(收藏的语音消息不能转发微信)

    收藏的语音消息不能转发怎么办(收藏的语音消息不能转发微信)

  • 有线连接是什么意思(网线连接头怎么接)

    有线连接是什么意思(网线连接头怎么接)

  • 苹果手机屏幕白斑会扩大吗(苹果手机屏幕白条纹怎么消除)

    苹果手机屏幕白斑会扩大吗(苹果手机屏幕白条纹怎么消除)

  • ipad第一次充电多久(ipad第一次充电要充多久)

    ipad第一次充电多久(ipad第一次充电要充多久)

  • 发起群聊对方有提示吗(发起群聊对方有提醒吗)

    发起群聊对方有提示吗(发起群聊对方有提醒吗)

  • 华为nova7se有红外线吗(华为nova7pro红色)

    华为nova7se有红外线吗(华为nova7pro红色)

  • 华硕笔记本一开机就reboot(华硕笔记本一开机就关机)

    华硕笔记本一开机就reboot(华硕笔记本一开机就关机)

  • 收音机收不到台的原因(收音机收不到台的声音)

    收音机收不到台的原因(收音机收不到台的声音)

  • 用户名密码错误是什么意思(电视家庭共享用户名密码错误)

    用户名密码错误是什么意思(电视家庭共享用户名密码错误)

  • 网络点歌机与点歌机的区别(网络点歌机与点音机区别)

    网络点歌机与点歌机的区别(网络点歌机与点音机区别)

  • qq投票管理员能看见吗(qq投票管理员能看到什么)

    qq投票管理员能看见吗(qq投票管理员能看到什么)

  • word里面怎么打乘号(word里面怎么打直径符号)

    word里面怎么打乘号(word里面怎么打直径符号)

  • 抖音怎么解除身份证绑定(抖音怎么解除身份认证不注销账号)

    抖音怎么解除身份证绑定(抖音怎么解除身份认证不注销账号)

  • 如何安装sd卡(怎样装sd卡)

    如何安装sd卡(怎样装sd卡)

  • 淘宝怎么卖东西(淘宝怎么卖东西便宜)

    淘宝怎么卖东西(淘宝怎么卖东西便宜)

  • 如何制作视频音频文件(如何制作视频音乐发朋友圈)

    如何制作视频音频文件(如何制作视频音乐发朋友圈)

  • trial balance是什么(trial balance 中文)

    trial balance是什么(trial balance 中文)

  • 亲属卡可以发红包吗(亲属卡发红包)

    亲属卡可以发红包吗(亲属卡发红包)

  • iphone11promax电池容量(iphone11promax电池续航时间)

    iphone11promax电池容量(iphone11promax电池续航时间)

  • 怎么查看iPad电池寿命损耗和循环次数(怎么查看ipad电池损耗)

    怎么查看iPad电池寿命损耗和循环次数(怎么查看ipad电池损耗)

  • 表格怎么排序号1234(numbers表格怎么排序号)

    表格怎么排序号1234(numbers表格怎么排序号)

  • wps怎么打印到一页(Wps怎么打印到一页)

    wps怎么打印到一页(Wps怎么打印到一页)

  • phpcms与phpsso通信失败的解决方法(phpcms使用教程)

    phpcms与phpsso通信失败的解决方法(phpcms使用教程)

  • 帝国cms升级到7.0 出现Unknown错误的解决办法(帝国cms升级到7.5后不能发布内容信息)

    帝国cms升级到7.0 出现Unknown错误的解决办法(帝国cms升级到7.5后不能发布内容信息)

  • 个税退付手续费是单位所得吗
  • 单独计税的年终奖怎么算
  • 加工企业税收优惠政策
  • 白条技巧
  • 错账更正方法有哪几种
  • 当月有进项无销项月末怎么处理
  • 销售退款怎么做分录
  • 周转材料核算科目是什么
  • 企业所得税汇算清缴账务处理
  • 拖欠供应商货款
  • 采购部付款申请单和财务付款流程
  • 清算多交的增值税如何结转做分录?
  • 餐饮招待怎么入账
  • 简易征收的增值税可以在税前列支吗
  • 5年内亏损弥补账务
  • 信用卡消费凭证
  • 哪些出口业务不能做
  • 公司购买理财产品的收益计入什么科目
  • 节能控制模块
  • 市政工程税率多少
  • 一万元国债一年多少利息
  • 党员经费的使用范围
  • 代扣代征税款有哪些
  • 个人财产转让所得在哪里申报
  • 查找我的iphone怎么添加设备
  • 投入产出法怎么求逆矩阵
  • 票据权利消灭是啥意思
  • 电脑如何关闭屏幕还在工作
  • php的强大功能函数库中都含有哪些常用函数?
  • 专用发票增量申请流程
  • PHP:mb_decode_mimeheader()的用法_mbstring函数
  • 集团公司对子公司如何进行资金管理
  • 一个红苹果多少钱
  • php文件修改后,打开还是显示以前的页面
  • 低值易耗品是怎样的
  • php获取post请求参数
  • 2018年残保金申报表填表说明
  • 免征增值税会计科目
  • 企业销售商品应该向购货单位收取的货款
  • html5简单吗
  • 公司银行取款流程
  • 视同销售账务处理如何做?
  • 借款合同按什么缴纳印花税
  • MongoDB db.serverStatus()输出内容中文注释
  • 什么是国有划拔土地私房
  • 哪些企业适用于企业会计制度
  • 税前可扣除的税费
  • 一般纳税人作废发票的流程
  • 研发费用形成无形资产的摊销怎么处理
  • 暂估成本发票来了怎么做分录
  • 新准则固定资产处置的账务处理
  • 季度的工会经费怎么算
  • mysql连接查询的几种方式
  • 此数据库中不存在用户或角色
  • mysql字段超长
  • mysql根据另一张表更新
  • windos桌面
  • windows vista(service pack1)
  • xwizard.exe是什么
  • win7同步中心怎么关掉
  • srvload.exe - srvload是什么进程
  • 为什么win7系统盘会自动满
  • win10win8
  • 32/64位Win10预览版11102(中英日韩等)多国语言包官方iso镜像下载大全
  • 对用药方案做合理性评估时
  • android4.4w
  • css-1
  • perl脚本foreach
  • unet遥感图像分割
  • Unity3D游戏开发引擎
  • js if语句怎么写
  • 批处理循环执行批处理
  • unity小例子
  • UnityException: Launching iOS project via Xcode4 failed
  • rsa 密钥格式
  • javascriptjs
  • jquery找父级
  • js判断ua
  • 青岛税务局网上办税厅app
  • 建筑公司报销流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设