vue3【父子组件间的传值--setup语法糖】

suoh's Blog

已于 2023-05-15 15:36:31 修改

阅读量2.4k

点赞数

分类专栏： ❤️❤️--vue3核心技术栈文章标签： vue.js vue3父子组件传值 vue3组件传值 defineEmits defineProps

于 2023-05-15 15:07:25 首次发布

本文链接：https://blog.csdn.net/qq_41579104/article/details/130645787

版权

❤️❤️--vue3核心技术栈专栏收录该内容

26 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细探讨Vue3中父子组件的通信方式，包括父组件如何向子组件传递值，子组件如何使用`defineEmits`向父组件发送事件，以及父组件如何通过`defineExpose`访问子组件的属性。文章通过实例代码展示了Vue2与Vue3在传值上的差异。

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

这篇文章主要讲解vue3语法糖中组件传值的用法、

一、父组件给子组件传值

父组件

<template>
    <div class='main'>我是父组件
        <Child :msg="parentMsg"></Child>
    </div>

</template>

<script setup>
import Child from './child'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance();
const parentMsg = ref('我是父组件的消息')
onMounted(() => {
})

</script>
<style scoped lang='less'>
.main {
    width: 500px;
    height: 500px;
    background: #1cd66c;
    margin: 0 auto;
}
</style>