Vue3中父子组件传值

最新推荐文章于 2025-05-27 10:11:08 发布

原创最新推荐文章于 2025-05-27 10:11:08 发布 · 828 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #component #props

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中，父组件通过props将值传递给子组件Head，并在子组件中触发自定义事件实现双向通信。通过实例代码展示了数据从父组件Home通过`msg`属性传递，以及子组件Head如何使用$emit触发父组件的回调函数。

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

父组件向子组件传值

父组件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>