Vue3中父子组件传值

最新推荐文章于 2024-05-17 08:00:00 发布

SignalFire

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量715

点赞数

分类专栏： Vue 文章标签： vue.js component props

本文链接：https://blog.csdn.net/SignalFire/article/details/124921997

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

父组件向子组件传值

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

SignalFire

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue3中父子组件传值

父组件向子组件传值父组件Home<template> <div class="home"> <Head :title='msg'></Head> </div></template><script>import Head from '@/components/Head.vue'export default { name: 'Home', components: { Head...
复制链接

扫一扫