Vue3---父传子---组合式API

最新推荐文章于 2025-02-22 11:17:43 发布

velpro_!

最新推荐文章于 2025-02-22 11:17:43 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_52053631/article/details/131466735

本文展示了在Vue3中如何在父组件中使用setup语法糖定义局部组件和响应式数据，并通过属性绑定传递数据到子组件。子组件则通过defineProps接收并显示来自父组件的数据。

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

父组件：

<script setup>
//setup语法糖下局部组件无需注册直接可以使用
import Son from './Son.vue'
import {ref} from "vue";
const count = ref(100)
setTimeout(()=>{
    count.value=200
},2000)
</script>

<template>
    <div>
        <h2>父组件</h2>
        <!--1.父组件给子组件绑定属性-->
        <!--message为非响应式数据  count为响应式数据-->
        <Son message="father" :count="count"></Son>
    </div>
</template>

子组件：

<script setup>
// 2. defineProps接收数据
const props = defineProps({
    message:String,
    count:Number
})
console.log(props)
</script>

<template>
    <div>
        <h2>子组件</h2>
        <div>父组件传过来的数据-----{{message}}---{{count}}</div>
    </div>
</template>

defineProps：编译器宏函数