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);
  // 可以在这里进行其他逻辑处理
}
相关推荐
morethanilove2 分钟前
新建vue3 + ts +vite 项目
前端·javascript·vue.js
GISer_Jing4 分钟前
微软AI战略全景:从基础设施到智能体生态
前端·人工智能·microsoft
发际线向北6 分钟前
0x03 单元测试与Junit
前端·单元测试
忆往wu前6 分钟前
搞懂 SPA 再学路由!Vue Router 从0到完善 + 嵌套路由一次性梳理
前端·vue.js
小智社群7 分钟前
获取贝壳中介列表,并且自动导入excel
开发语言·javascript·ecmascript
Aliex_git7 分钟前
前端监控笔记(三)
前端·笔记·学习
布局呆星8 分钟前
Vue3 笔记:过渡动画与自定义指令
javascript·css·vue.js·python·es6·html5
M ? A9 分钟前
Vue Suspense 组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
im_AMBER10 分钟前
Leetcode 159 无重复字符的最长子串 | 长度最小的子数组
javascript·数据结构·学习·算法·leetcode
天才熊猫君13 分钟前
通用 Loading 状态管理器
前端·javascript·vue.js