Vue3中父组件与子组件的传值

子组件:SelectCity

javascript 复制代码
const emit = defineEmits(['sendCity'])
//每个按钮的触发事件
const doSomething=(city)=>{
  console.log("子组件中"+city);
  emit("sendCity",city)
}

它通过 emit 发出 sendCity 事件,将 city 作为数据传递给父组件或其他监听了该事件的组件

父组件:air

直接监听sendCity事件,

html 复制代码
 <SelectCity  @sendCity="handleSendCity"></SelectCity>

监听到了触发handleSendCity函数

javascript 复制代码
function handleSendCity(city) {
  // 在这里处理接收到的城市信息
  console.log('父组件中监听到的城市', city);
  // 可以在这里进行其他逻辑处理
}
相关推荐
晚风资源组15 分钟前
CSS文字和图片在容器内垂直居中的简单方法
前端·css·css3
Miketutu1 小时前
Flutter学习 - 组件通信与网络请求Dio
开发语言·前端·javascript
摘星编程1 小时前
React Native for OpenHarmony 实战:Swiper 滑动组件详解
javascript·react native·react.js
鸣弦artha1 小时前
Flutter框架跨平台鸿蒙开发——Build流程深度解析
开发语言·javascript·flutter
QQ4022054962 小时前
python基于vue的大学生课堂考勤系统设计与实现django flask pycharm
vue.js·python·django
光影少年3 小时前
前端如何调用gpu渲染,提升gpu渲染
前端·aigc·web·ai编程
Surplusx3 小时前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
小宇的天下3 小时前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
LongJ_Sir3 小时前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript
跟着珅聪学java4 小时前
JavaScript 中定义全局变量的教程
javascript