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);
  // 可以在这里进行其他逻辑处理
}
相关推荐
前端(从入门到入土)1 分钟前
解决Webpack打包白屏报错问题l.a.browse is not a function
前端·javascript
Jul1en_1 分钟前
【Web自动化测试】Selenium常用函数+IDEA断言配置
前端·selenium·intellij-idea
Marshmallowc2 分钟前
从源码深度解析 React:Hook 如何在 Fiber 中存储?DOM Ref 如何绑定?
前端·react.js·前端框架·fiber
Eiceblue3 分钟前
Vue文档编辑器(Word默认功能)示例
前端·vue.js·word
Mr Xu_7 分钟前
在 Vue 3 中集成 WangEditor 富文本编辑器:从基础到实战
前端·javascript·vue.js
No Silver Bullet7 分钟前
HarmonyOS NEXT开发进阶(二十三):多端原生App中通过WebView嵌套Web应用实现机制
前端·华为·harmonyos
光影少年11 分钟前
react和vue中的优点和缺点都有哪些
前端·vue.js·react.js
web_Hsir11 分钟前
uniapp + vue2 + pfdjs + web-view 实现安卓、iOS App PDF预览
android·前端·uni-app
css趣多多12 分钟前
画系统的整体思路
vue.js
EndingCoder13 分钟前
Node.js 与 TypeScript:服务器端开发
前端·javascript·typescript·node.js