vue3 #组件通信#父传子#defineProps

//在父组件中

<template>

    <h1>父组件</h1>

    <Son :car="car" :money="money" />   //将数据传递给子组件

</template>

<script setup lang="ts">

import { ref } from 'vue'

import Son from './components/Son.vue'

const money = ref(10)          //定义响应式数据

const car = ref('五菱宏光')

</script>

//在子组件中（son.vue）

<template>

    <h2>子组件</h2>

    <div>{{car}}</div>

    <div>{{money}}</div>

</template>

<script setup lang="ts">

interface Props {                 //定义传过来的数据类型

    car ?: string,                   // ? 表示可传可不传

    money : number

}

defineProps<Props >( )

</scrpit>

⭐如果后续想要在script中使用父组件传递的数据，可以const props = defineProps<Props >( ) ,

赋值给一个变量，如果想获取car的值，使用props.car即可

举例:

const props = defineProps<Props >()

const myMoney = computed( () => {

    return props.money + 50

} )