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);
  // 可以在这里进行其他逻辑处理
}
相关推荐
前端那点事2 分钟前
Vue批量文件上传并发踩坑指南:3步解决阻塞、限流、进度混乱
前端·面试
桔筐18 分钟前
Vue3 v-model 双向绑定导致循环触发的坑
前端·javascript·vue.js
Alice-YUE23 分钟前
前端图片优化完全指南:从格式到加载的全面提速方案
前端·笔记·学习
fen_fen36 分钟前
下载Chrome浏览器对应的Driver
前端·chrome
路光.38 分钟前
ReferenceError:Can‘t find variable:structureClone
前端·javascript·html·vue2
前端那点事38 分钟前
内存泄漏排查全指南:从场景识别到工具实操,新手也能上手
前端·vue.js
我这一生如履薄冰~42 分钟前
浏览器多窗口同开一页面,数据同步更新(纯前端方案)
前端·javascript
Alice-YUE1 小时前
前端性能优化完全指南:从指标到实战
前端·学习·性能优化
Rkgua1 小时前
实例成员和静态成员在对象中的用法
javascript
Momo__1 小时前
Web Speech API 语音识别与合成详解
前端·javascript