Vue3中父子组件传值

关注

原创最新推荐文章于 2026-04-22 00:08:45 发布 900 阅读 AI 写同款· GEO 优化 ›

vue3【父子组件间的传值--setup语法糖】 vue2.x使用的是 this.$emit 而vue3使用的是emit（因为vue3中没有this），它们的传值一样都是方法加值，即vue2.x的是。3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数。this.$emit('方法名','传递的值(根据需要传或者不传)')导出，父组件才能访问到数据，否则拿不到子组件的数据。并定义要发射给父组件的方法，也可以传空。语法糖中，需要将组件的属性及方法通过。，vue3的setup语法糖的是。可以访问子组件的方法和属性，在。阅读详情

父组件向子组件传值

父组件Home

<template>
<div class="home">
   <Head :title='msg'></Head>
</div>
</template>

<script>
import Head from '@/components/Head.vue'

export default {
name: 'Home',
components: {
   Head
},
data(){
   return {
       msg:"父组件的值"
   }
}
}
</script>

子组件Head

<template>
   {{title}}
</template>

<script>
   export default{
       name:'Head',
       props:['title']
   }
</script>

<style>
</style>

子组件向父组件传值

子组件Head

<template>
   head组件<br />
   {{title}}<hr />
   <button @click="send">向父组件传值</button>
</template>

<script>
   export default{
       name:'Head',
       props:['title'],
       methods:{
           send(){
               this.$emit("receive","子组件的值")
           }
       }
   }
</script>

<style>
</style>

父组件Home

<template>
<div class="home">
   <Head :title='msg'
       @receive="printMsg"
   ></Head>
</div>
</template>

<script>
import Head from '@/components/Head.vue'

export default {
name: 'Home',
components: {
   Head
},
data(){
   return {
       msg:"父组件的值"
   }
},
methods:{
   printMsg(msg){
       console.log(msg)
   }
}
}
</script>