位置: 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 自定义类型)

  • 红米note11t pro怎么改变锁屏时间日期形式(红米note11tpro怎么插卡)

    红米note11t pro怎么改变锁屏时间日期形式(红米note11tpro怎么插卡)

  • ipad画中画怎么用(iPad画中画怎么弄)

    ipad画中画怎么用(iPad画中画怎么弄)

  • 呼吸灯闪烁在哪里设置(呼吸灯闪烁在哪里设置华为平板)

    呼吸灯闪烁在哪里设置(呼吸灯闪烁在哪里设置华为平板)

  • 苹果xr wifi连上不能上网(苹果xr连接wifi不稳定怎么解决)

    苹果xr wifi连上不能上网(苹果xr连接wifi不稳定怎么解决)

  • 手机邮箱打不开是什么原因(手机邮箱打不开压缩文件)

    手机邮箱打不开是什么原因(手机邮箱打不开压缩文件)

  • 微信登录操作频繁(微信登录操作频繁怎么办)

    微信登录操作频繁(微信登录操作频繁怎么办)

  • 苹果手表3和4和5的区别(苹果手表3跟4)

    苹果手表3和4和5的区别(苹果手表3跟4)

  • nova5z发热严重(nova5ipro发热严重)

    nova5z发热严重(nova5ipro发热严重)

  • win7无故自动重启(win7 自动重启)

    win7无故自动重启(win7 自动重启)

  • 单通道和双通道的区别大吗(怎么判断单通道和双通道)

    单通道和双通道的区别大吗(怎么判断单通道和双通道)

  • 苹果siri语音叫不出来(苹果siri语音叫不出来只有键盘可以打字)

    苹果siri语音叫不出来(苹果siri语音叫不出来只有键盘可以打字)

  • 苹果wifi版可以插卡吗(苹果wifi版可以登id吗)

    苹果wifi版可以插卡吗(苹果wifi版可以登id吗)

  • 网络ssr是什么意思(网络语言ssr是什么意思)

    网络ssr是什么意思(网络语言ssr是什么意思)

  • 华为手机怎么设置骚扰电话免打扰(华为手机怎么设置下面的三个功能键)

    华为手机怎么设置骚扰电话免打扰(华为手机怎么设置下面的三个功能键)

  • vivo能用华为充电器吗(vivo用华为充电器会有影响吗)

    vivo能用华为充电器吗(vivo用华为充电器会有影响吗)

  • 手机自带软件怎么恢复(手机自带软件怎样删除卸载)

    手机自带软件怎么恢复(手机自带软件怎样删除卸载)

  • 抖音怎么上传60秒视频(怎么在抖音上传视频)

    抖音怎么上传60秒视频(怎么在抖音上传视频)

  • 小米ai音箱需要联网吗(小米ai音箱必须要连wifi吗)

    小米ai音箱需要联网吗(小米ai音箱必须要连wifi吗)

  • 怎么把歌词放到手机桌面(怎么把歌词放到灵动岛上)

    怎么把歌词放到手机桌面(怎么把歌词放到灵动岛上)

  • 苹果xr怎么设置抬头灯(苹果xr怎么设置铃声)

    苹果xr怎么设置抬头灯(苹果xr怎么设置铃声)

  • 华为智能遥控不见了(华为智能遥控不小心删了怎么找回)

    华为智能遥控不见了(华为智能遥控不小心删了怎么找回)

  • 企业为什么需要做微信开发(企业为什么需要法律顾问)

    企业为什么需要做微信开发(企业为什么需要法律顾问)

  • 磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单(新的磁贴)

    磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单(新的磁贴)

  • fameh32.exe是病毒程序吗 fameh32是安全进程吗(.fas文件病毒)

    fameh32.exe是病毒程序吗 fameh32是安全进程吗(.fas文件病毒)

  • MySQL面试题-锁相关(数据库锁面试题)

    MySQL面试题-锁相关(数据库锁面试题)

  • 完税证明是可以抵扣吗
  • 国外公司税号查询
  • 增值税小规模纳税人优惠政策
  • 2019最新运输发票样本
  • 蔬菜批发销售免税政策
  • 小企业采用什么折旧方法
  • 开具增值税专用发票的要求
  • 个体工商户转为企业要交税吗
  • 承兑汇票承兑流程
  • 企业的其他账簿怎么做
  • 一般纳税人出租不动产增值税税率
  • 补交社保后的个税怎么交
  • 分公司如何缴纳公积金
  • 纳税人必须先复议再诉讼
  • 单位给员工交社保怎么交怎么计算
  • 长期零申报的公司容易注销吗
  • 机械租赁费如何入账科目
  • 公司成本和费用过高怎么办
  • 增值税申报错误已经扣税怎么处理
  • 手机型号不在鸿蒙系统里
  • 在win7中创建快捷方式可以创建什么
  • 固定资产折旧计算方法
  • 收到服务费专票怎么做账
  • 原版win10系统安装方法
  • gwsystemservice.exe是什么进程 有什么作用 gwsystemservice进程查询
  • 固定资产一次性扣除后第二年账务处理
  • CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容
  • 计算机视觉姿势评估英语
  • php时间转换成时间戳
  • 营改增企业所得税税率
  • 累计摊销属于什么类科目
  • 企业所得税征前减免是什么意思
  • 蓝桥杯2021出结果
  • pytorch卷积操作
  • 量子退火算法入门6
  • 如何防止sql注入 java
  • vue-echarts
  • 小规模餐饮业如何征税
  • phpcms v9官网
  • 个体工商户注册需要什么材料
  • 生活办公用品清单
  • 帝国cms适合建什么站
  • 企业预收账款缴纳个税吗
  • mongo认证失败
  • 暂估入库多了怎么办
  • 外购存货的初始成本由买价加采购费用构成
  • 为什么合理损耗不计入成本
  • 企业拆迁补偿款
  • 非货币性资产含义
  • 消耗品清单
  • 应付利息核算的会计分录
  • 税务机关多收税款几年可以要求退回
  • 售后更换零件的申请
  • 收到对方开的红字发票怎么做账
  • 销项负数发票是红字发票吗
  • 失控发票已补税及滞纳金后还有事吗
  • 材料报废 开什么发票
  • 开发票时如何添加商品编码?
  • 工业用地使用年限30年与50年有什么区别
  • sqlserver获取uuid
  • Win7旗舰版系统文件名称
  • win8出现问题需要重启
  • windowsxp怎么用
  • Mac OSX通过homebrew卸载formula的方法
  • centos8终端
  • hyper-v win98
  • linux 11
  • jquery对动态生成的进行操作
  • 教你学python
  • vue assign
  • python内置函数什么用来返回序列中的最大元素
  • nodejs使用视频教程
  • cmd批处理命令文件个数
  • 黑马程序员学费多少钱2018
  • js 显示当前时间
  • jQuery使用animate实现ul列表项相互飘动效果示例
  • Android开发使用的官方IDE是
  • 养殖业免税用报税吗
  • 在本地买车怎么上外地牌照
  • 认缴制什么时候开始的?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设