Vue3.0的父子传值

最新推荐文章于 2025-06-30 17:52:30 发布

「已注销」

最新推荐文章于 2025-06-30 17:52:30 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44316317/article/details/122474228

本文介绍了Vue3.0中父子组件之间的通信方式。对于父组件向子组件传值，需将数据转化为响应式然后绑定。子组件向父组件传值则通过自定义事件实现。

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

Vue3.0的父子传值

1.父组件向子组件传值

父组件：

<template>
<div>
    <h1>父组件<h1>
    <hr>
    <son :money="money">
</div>
</template>
<script>
import {ref} from 'vue'
import son from './son.vue'
export default {
  name:'App',
  components:{
    Son
}
//父组件的数据传递给子组件
setup(){
  const money = ref(100);
  return {money}
}
}
</script>

注：Vue3.0中父组件向子组件中传值和Vue2.0中传值一样只不过要按照Vue自己的方式将自己的数据变成响应式的数据进行绑定。

子组件：

<template>
<div>
    <h1>子组件</h1>
    <hr>
    <div>{{money}}</div>
</div>
</template>
<script>
    import {onMounted} from 'vue'
    export default{
        name:'App',
         props:{
                money:{
                    type:Number,
                    default:0    
               }
        },
        setup(props){
           console.log(props.money)   
        }
    }
</script>

2.子组件向父组件传值

父组件：

<template>
<div>
    <h1>父组件<h1>
    <hr>
    <son :money="money" @changeMoney="updateMoney">
</div>
</template>
<script>
import {ref} from 'vue'
import son from './son.vue'
export default {
  name:'App',
  components:{
    Son
}
//父组件的数据传递给子组件
setup(){
  const money = ref(100);
    //触发子组件的事件
    updateMoney(x){
        //父组件触发子组件的事件并且接受参数
        money.value -=x;
    }
  return {money,updateMoney}
}
}
</script>

子组件：

<template>
<div>
    <h1>子组件</h1>
    <hr>
    <div>{{money}}</div>
    <button @click="changeMoney">父组件减少50块</button>
</div>
</template>
<script>
    import {onMounted} from 'vue'
    export default{
        name:'App',
         props:{
                money:{
                    type:Number,
                    default:0    
               }
        },
        setup(props,{emit}){
            //emit出发自定义事件
           console.log(props.money);
           const changeMoney=()=>{
               emit('changeMoney',50)
               //告诉父组件事件以及传递的参数
           } 
        }
    }
</script>