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);
  // 可以在这里进行其他逻辑处理
}
相关推荐
kyriewen1126 分钟前
Next.js:让你的React应用从“裸奔”到“穿衣服”
开发语言·前端·javascript·react.js·设计模式·ecmascript
MXN_小南学前端27 分钟前
基于 Vue3 + ECharts 的数据大屏实例(提供gitHub仓库地址)
前端·javascript·echarts
宁雨桥35 分钟前
for of,for in以及传统for循环的区别与不同场景下的使用选择
前端·javascript
椰羊~王小美1 小时前
除了前端 JS 配置的国际化,对于 JS 没覆盖到的文本,怎么实现国际化
前端·javascript·状态模式
AC赳赳老秦1 小时前
DBA 专属方案:用 OpenClaw 实现 SQL 语句优化、慢查询分析、数据库备份巡检全自动化
服务器·前端·数据库·ffmpeg·自动化·deepseek·openclaw
燐妤1 小时前
前端HTML编程1:初识html
前端·html5
xiaoye37081 小时前
java接口文档工具 swagger2和swagger3对比
java·服务器·前端
tongyiixiaohuang2 小时前
基于轻易云的数据集成,实现企业系统间灵活对接
java·前端·数据库
哥本哈士奇2 小时前
Power BI学习笔记第17篇:Power BI Dashboard 常用布局方案推荐
前端·powerbi
军军君012 小时前
数字孪生监控大屏实战模板:固体颗粒物监管平台
前端·javascript·vue.js·typescript·前端框架·echarts·less