父组件:
<template>
<div class="father">
<h3>父组件</h3>
<h4>汽车:{{ car }}</h4>
<h4 v-show="toy">接收到子组件发送的玩具:{{ toy }}</h4>
//传递数据
<child :car="car" :sendToy="getToy"/>
</div>
</template>
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import {ref} from 'vue'
// 数据
let car = ref('奔驰')
let toy = ref()
// 方法
function getToy(value:string){
console.log('父',value);
toy.value = value
}
</script>
子组件:
<template>
<div class="child">
<h3>子组件</h3>
<h4>玩具:{{ toy }}</h4>
//使用数据
<h4>父给的车:{{ car }}</h4>
<button @click="sendToy(toy)">把玩具给父组件</button>
</div>
</template>
<script setup lang="ts" name="Child">
import {ref} from 'vue'
import { defineProps } from 'vue'
// 数据
let toy = ref('奥特曼')
//接收数据
defineProps(['car','sendToy'])
</script>
<style scoped>
.child{
background-color: skyblue;
padding: 10px;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
</style>