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

  • 小规模纳税人增值税可以抵扣吗
  • 农产品加工企业怎样申请营业执照?
  • 账簿印花税的计税方法
  • 资本公积和盈余公积怎么提取
  • 年度纳税总额的时间怎么计算
  • 购买信息技术服务费摘要怎么写
  • 季度所得税申报错误,一定要更改吗
  • 已知不含税金额和税额怎么求税率
  • 成本占收入比重分析
  • 哪些属于不动产权
  • 公司支付倒垃圾费怎么做会计分录
  • 企业自行去税务开具房租发票税款怎么做?
  • 车辆租赁合同印花税怎么算
  • 为什么公司信用代码不对
  • 企业购进固定资产进项税如何抵扣
  • 已抵扣未认证的发票
  • 企业没有土地证
  • 什么是城市维护费
  • 计提生产设备折旧费计入什么科目
  • 鸿蒙系统智慧场所在哪
  • 笔记本电脑的触摸板怎么用右键
  • 研发费用资本化可以加计扣除吗
  • 方正电脑u盘启动按什么键
  • 什么是递延所得税资产和负债
  • 新成立公司工会经费什么时候交
  • PHP:Memcached::append()的用法_Memcached类
  • 五彩鲍鱼的做法
  • php基础入门教程
  • 员工的医药费
  • 金融保险业的营业税率为
  • vue的安装命令
  • 搭建自己的php mvc框架
  • php自定义函数的关键字是什么
  • 头歌java入门运算符和表达式答案
  • 午夜太阳的意思
  • Web Spider Fiddler - JS Hook 基本使用
  • gmt微调
  • php image
  • 购买用品开专票怎么开
  • 工资薪金所得适用的税率是
  • 原材料的会计处理有哪些
  • 进口货物如何支付外汇
  • 固定资产变卖怎么做账务处理
  • 培训学校收入如何确认
  • 客户多付的货款 不用退回 进营业外收入吗
  • 债券到期的账面价值计算
  • 事业单位财政直拔工资误填为劳务费怎么写情况说明
  • 长期借款账务处理会计分录
  • 长期股权投资成本法会计处理
  • 事业单位结余是什么意思
  • 关于小微企业免征印花税的规定
  • 核定征收方式的小型微利企业可以享受
  • 房地产公司开发的商品房应作为固定资产核算
  • 退资本金现金流量表走哪一项
  • 技术服务发票怎么做成本
  • 去年的凭证今年未入账
  • 会计核算采用什么形式
  • mysql安装使用教程
  • 使用注册表删除软件时,有些拒绝访问
  • win8.1的开始菜单在哪
  • win10玩上古世纪闪退
  • win7笔记本触摸板怎么用滑轮
  • windows7禁止开机启动
  • node.js编译
  • 解决Android Studio下载gradle慢
  • Unity3D游戏开发引擎
  • 批处理的应用
  • 显示解析包时出错是怎么回事
  • 置顶聊天的人怎么不见了
  • shell脚本spool
  • 浏览器检测js代码
  • 获取服务器信息失败mc
  • 深入理解新发展理念
  • js优化108条建议
  • jquery 图片裁剪
  • android获取手机的基本信息
  • js动态调用方法
  • 广东政务平台网上办事大厅
  • 重庆税务自助取票地点
  • 国税局发票查询平台发票查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设