组件通信-props

props 是使用频率最高的一种通信方式，父>子  子>父

• 父传子：属性值 是非函数
• 子传父：属性值 是函数

父组件

<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'
const car = ref('奥迪')
const toy = ref('')
const getToy = (value: string) => {console.log('接收到子组件传递过来的玩具', value);toy.value = value
}
</script><template><div class="father"><h1>父组件</h1><h4>父的车：{{ car }}</h4><h4 v-if="toy">子给的玩具：{{ toy }}</h4><Child :car="car" :sendToy="getToy" /></div></template>

子组件

<script setup lang="ts">
import { ref } from 'vue'
defineProps(['car', 'sendToy'])
const toy = ref('奥特曼')
</script><template><div class="child"><h1>子组件</h1><h4>子的玩具：{{ toy }}</h4><div>父给的车：{{ car }}</div><button @click="sendToy(toy)">把玩具传递给父亲</button></div></template>