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 分钟前
Edge TPU LiteRT V2拆解:1GB内存设备也能流畅跑AI的底层逻辑
前端·人工智能·edge
小福气_7 分钟前
自定义组件 vue3+elementPlus
前端·javascript·vue.js
程序员博博9 分钟前
这才是vibe coding正确的打开方式 - 手把手教你开发一个MCP服务
javascript·人工智能·后端
piaoroumi10 分钟前
UVC调试
linux·运维·前端
前端不太难22 分钟前
RN 调试效率低,一点小改动就需要重新构建?解决手册(实战 / 脚本 / Demo)
前端·react native·重构
是谁眉眼24 分钟前
vue环境变量
前端·javascript·vue.js
3秒一个大25 分钟前
JSX 基本语法与 React 组件化思想
前端·react.js
鹏北海-RemHusband25 分钟前
Vue 组件解耦实践:用回调函数模式替代枚举类型传递
前端·javascript·vue.js
用户66006766853926 分钟前
斐波那契数列:从递归到缓存优化的极致拆解
前端·javascript·算法
NuLL26 分钟前
异步并行任务执行工具
javascript