vue3.x专题六 ---- 组合API-父子通讯的用法

上趣工作室

于 2024-03-18 18:00:00 发布

阅读量373

点赞数 7

分类专栏： vue3.x 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52584863/article/details/136801351

版权

vue3.x 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了Vue3.x中，父组件通过`ref`和`props`向子组件传值的方法，以及子组件如何通过`emit`事件反向传值给父组件。

摘要由CSDN通过智能技术生成

vue3.x的传值，与vue2.x有所不同，下面我们来总结一下：

1、父组件传值给子组件

父组件（App.vue）：

<template>
    <div>
        <div>
            父组件
        </div>
        <hr>
        <br>
        <br>
        <br>
        <!-- 父组件传值子组件 -->
        <Son :count="count"></Son>
    </div>
</template>

<script>
import Son from './Son.vue'
import { ref } from 'vue'
    export default {
        name:"App",
        components:{
            Son
        },
        setup() {
            const count = ref(10)
            return {
                count
            }
        }
    }
</script>

<style scoped>

</style>

子组件（Son.vue）：

<template>
    <div>
        子组件
    </div>
    <div>
        {{ count }}
    </div>
</template>

<script>
    export default {
        props:{
            count:{
                type:Number,
                default:0
            }
        },
        setup(props, {emit}) {
            console.log("props:",props);
        }
    }
</script>

<style scoped>

</style>

2、子组件给父组件传值

父组件（App.vue）：

<template>
    <div>
        <div>
            父组件
        </div>
        <hr>
        <br>
        <br>
        <br>
        <!-- 父组件传值子组件 -->
        <Son :count="count" @change-count="updateCount"></Son>
    </div>
</template>

<script>
import Son from './Son.vue'
import { ref } from 'vue'
    export default {
        name:"App",
        components:{
            Son
        },
        setup() {
            const count = ref(10)
            const updateCount = (val) => {
                console.log(val);
                count.value = val
            }
            return {
                count,
                updateCount
            }
        }
    }
</script>

<style scoped>

</style>

子组件（Son.vue）：

<template>
    <div>
        子组件
    </div>
    <div>
        {{ count }}
    </div>
    <div>
        <button @click="sonToFather">
            子传父
        </button>
    </div>
</template>

<script>
    export default {
        props:{
            count:{
                type:Number,
                default:0
            }
        },
        setup(props, {emit}) {
            console.log("props:",props);
            const sonToFather = () => {
                emit("change-count",666)
            }
            return {
                sonToFather
            }

        }
    }
</script>

<style scoped>

</style>