vue3 父组件向子组件传值

治金的blog

于 2024-07-29 16:56:58 发布

阅读量171

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_55111117/article/details/140775284

版权

文件目录

index,vue 的内容（父组件的内容）

<template>
    <div>
        <h1>父组件</h1>
        <ChildComponent :message="parentMessage" :number="parentNumber"/>
    </div>
</template>

<script setup>
import ChildComponent from './component/childComponent.vue'  //引入子组件



// 定义要传递给子组件的数据
const parentMessage = '父组件传递给子组件的数据 Hello World!!!'
const parentNumber = 123

</script>

<style scoped>
</style>

子组件的内容

<!-- childComponent.vue -->
<template>
    <div>
        <p>传递的消息: {{ message }}</p>
        <p>传递的数字: {{ number }}</p>
    </div>

</template>

<script setup>
import { defineProps } from 'vue';
// 定义props

const props = defineProps({
    message:String,
    number:Number
});
</script>

<style scoped>

</style>

运行展示效果