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);
  // 可以在这里进行其他逻辑处理
}
相关推荐
闲蛋小超人笑嘻嘻9 分钟前
localStorage用法详解
前端
Swift社区13 分钟前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
Mr_chiu13 分钟前
微前端从入门到精通:Vue开发者的大型应用架构演进指南
前端·架构
光影少年15 分钟前
前端开发桌面应用开发,Flutter 与 Electron如何选?
javascript·flutter·electron
Violet_YSWY17 分钟前
Vue-Pinia defineStore 语法结构
前端·javascript·vue.js
全栈陈序员17 分钟前
v-if 和 v-for 的优先级是什么?
前端·javascript·vue.js·学习·前端框架·ecmascript
xinyu_Jina19 分钟前
Info Flow:大规模列表渲染中的UI虚拟化、数据懒-加载与前端性能工程
前端·ui
GISer_Jing21 分钟前
JD AI全景:未来三年带动形成万亿规模的人工智能生态
前端·人工智能·aigc
全栈陈序员23 分钟前
你对 SPA 单页面应用的理解?它的优缺点分别是什么?如何实现 SPA 应用?
前端·vue.js·学习·前端框架·vue
我是伪码农27 分钟前
动态表格案例
前端·javascript·html