Vue3.0的父子组件通信指南-优快云博客

本文链接：https://blog.youkuaiyun.com/pasco152/article/details/121582650

本文详细介绍了在Vue3.0中如何实现父组件向子组件传递数据以及子组件向父组件传递数据的方法，包括在App.vue和son.vue中的具体实现，并特别强调了使用emits的重要性，以避免出现警告。

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

一、父传子

App.vue

<template>
    <div class="countainer" style="display: flex">
        <h1>父组件</h1>
        <son :toSonData="toSonData" />
    </div>
</template>
<script>
import { ref } from 'vue'
import son from './components/son.vue'
export default {
    name: 'App',
    components: {
        son,
    },
    /**
     * 模板中需要的数据和函数，都从setuo里返回
     */
    setup() {
        // 父组件传给子组件的值
        const toSonData = ref(100);

        return { toSonData }; // 这里返回的是一个对象
    },
}
</script>

son.vue

<template>
    <div class="son">子组件</div>
    <div>{{ toSonData }}</div>
</template>
<script>
export default {
    name: 'son',
    props: {
        // 可以定义一个初始类型
        toSonData: {
            type: Number,
            default: 0
        }
    },
    setup(props) {
        // 直接可以在props里面拿到父组件传过来的值
        console.log(props.toSonData);
    }
}
</script>

二、子传父

son.vue

<template>
    <div class="son">子组件</div>
    <div>父组件传给我的值：{{ toSonData }}</div>
    <button @click="changeAppData">点我子组件修改父组件的值</button>
</template>
<script>
export default {
    name: 'son',
    emits: ['sonChangeData'],
    props: {
        // 可以定义一个初始类型
        toSonData: {
            type: Number,
            default: 0
        }
    },
    setup(props, { emit }) {
        // 直接可以在props里面拿到父组件传过来的值
        console.log(props.toSonData);
        const changeAppData = () => {
            emit('sonChangeData', 50);
        }
        return { changeAppData }
    }
}
</script>

App.vue

<template>
    <div class="countainer" style="display: flex">
        <h1>父组件</h1>
        <div>父组件传给子组件的值： {{ toSonData }}</div>
        <son :toSonData="toSonData" @sonChangeData="updataSonData" />
    </div>
</template>
<script>
import { ref } from 'vue'
import son from './components/son.vue'
export default {
    name: 'App',
    components: {
        son,
    },
    /**
     * 模板中需要的数据和函数，都从setuo里返回
     */
    setup() {
        // 父组件传给子组件的值
        let toSonData = ref(100);

        const updataSonData = (newValue) => {
            console.log(newValue);
            toSonData.value = newValue;
        }

        return { toSonData, updataSonData }; // 这里返回的是一个对象
    },
}
</script>

需要注意的是要添加emits，不然会有警告