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

本文主要是介绍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

} ) 

这篇关于vue3 #组件通信#父传子#defineProps的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---