Vue 父组件给子组件传值，子组件给父组件传值

最新推荐文章于 2025-08-05 22:11:48 发布

原创最新推荐文章于 2025-08-05 22:11:48 发布 · 462 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了在Vue.js中，父组件通过`props`向子组件传递值以及子组件通过`emit`事件将值回传给父组件的方法实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件给子组件传值

//父组件代码
<div @click="postReturn">点击传值</div>
<WorkList ref="children" />

const children= ref()
const postReturn= ()=>{
    children.value.getChild('123')
}

// 子组件代码
const getChild= (record)=>{
     console.log("打印父组件传值：",record) //打印值：123
}

2.子组件给父组件传值

//父组件代码
<WorkList
    :items="items"
    @updateRenew="updateRenew">
</WorkList>

const updateRenew = (record)=>{
    console.log('子组件传过来的值:',record) //record 打印： 123
}


// 子组件代码
<div @click="return">点击传值</div>

const data = ref('123')
const emit = defineEmits(['updateRenew'])
const return = ()=>{
 emit('updateRenew', data.value)
}