Father.vue
<template> <div class="father"> <h3>父组件</h3> <h4>汽车：{{ car }}</h4> <h4 v-show="toy">Child给的玩具：{{toy}}</h4> <Child :car='car' :sendToy="getToy"></Child> </div> </template> <script lang="ts" name="Father" setup> import { ref } from 'vue' import Child from './Child.vue' // 数据 let car = ref('五菱宏光'); let toy = ref(''); // 方法 value 为子组件传过来的数据 function getToy(value: string){ toy.value = value; } </script> <style scoped> .father { background-color: rgb(165, 164, 164); padding: 20px; border-radius: 10px; } </style>Child.vue
<template> <div class="child"> <h3>子组件</h3> <h4>玩具：{{toy}}</h4> <h4>父给的车：{{car}}</h4> <button @click="sendToy(toy)">玩具给father</button> </div> </template> <script lang="ts" name="Child" setup> import { ref } from 'vue' // 数据 let toy = ref('奥特曼'); // 第一种方法 start // 声明接收 props // let props = defineProps(['car','sendToy']); // function fasong(){ // // 可以这么调用 // props.sendToy(toy.value); // } // end // 第二种方法 defineProps(['car','sendToy']); </script> <style scoped> .child{ background-color: skyblue; padding: 10px; box-shadow: 0 0 10px black; border-radius: 10px; } </style>
