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

  • 财税2012年15号文件作废
  • 不含税的金额
  • 企业税申报的三种方式
  • 全球第一家上市的互联网电商平台
  • 利润表的调整
  • 企业会计准则颁布部门
  • 民办非企业可以上市吗
  • 怎么知道对方的支付宝账号
  • 税务局代开发需要盖章吗
  • 服装业增值税专用发票税率
  • 公司对供应商罚款合法吗
  • 代销商品会计分录步骤
  • 年末发票
  • 装修项目展示厅费用支出列什么科目?
  • 研发支出费用化支出包括哪些
  • 企业购买劳保用品会计处理
  • 如何开境外帐户
  • 企业股权转让有什么好处
  • 风险纳税人不处理行吗
  • 专用发票不报销对公司有影响吗
  • 税收征收管理权是什么
  • 资本公积 税务
  • 筹建人员是什么工作
  • 多转出的进项税怎么做账
  • 华为mate pro翻转静音
  • PHP:oci_set_client_identifier()的用法_Oracle函数
  • window的hosts文件
  • PHP:set_file_buffer()的用法_Filesystem函数
  • 固定资产后续支出一律计入固定资产成本
  • 喝薏米红豆水最佳时间
  • php imagecopy
  • 怎么用云服务
  • 资产负债表的编制方法
  • 调整以前年度少计提的工资
  • vue项目打包后还能修改吗
  • php面向对象编程实验总结
  • 年度成本费用总额公式
  • vmstat命令 监视系统资源状态
  • centos+php+coreseek+sphinx+mysql之一coreseek安装篇
  • 金蝶软件怎么查银行科目明细
  • 冲销去年暂估成本对企业所得税的影响
  • php单例模式优点
  • mysql事务引擎
  • phpcms怎么修改模板风格
  • 股东投钱一般怎么投
  • 三方协议是什么意思?
  • 什么企业符合高新技术企业
  • 销售清单有法律效力吗
  • mysql 忘记密码重置密码
  • 一次性开票分期收入账务处理
  • 财税人员岗位职责
  • 合理的物料消耗是指
  • 异地房产税如何收
  • 跨月报销的算当月还是上个月的
  • 收到社保局的生育津贴并付给职工如何入账
  • 收到退留抵税额会计分录
  • 企业存货借款利息怎么算
  • 跨国公司国内外发展现状
  • 记账凭证如何填写明细科目
  • 记账凭证的审核与编制可以是一个人吗
  • windows无法启动MySQL80服务
  • xp怎么安装framework
  • linux怎么用命令
  • windows一体机
  • xp系统怎么打开开机启动项
  • xp开机后蓝屏
  • centos7.0安装教程
  • pkjobs.exe - pkjobs是什么进程 有什么用
  • linux端口流量监控
  • win10系统中哪些软件可以删除
  • 在linux系统中有一个重要的概念
  • jquery 列表控件
  • linux c语言获取当前路径
  • linux特殊符号转义
  • jquery动态
  • java 信号量 超时
  • 外地经营预缴企业所得税
  • 山西国家税务总局官网
  • 烟草什么品牌好
  • 贵州地税电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设