组件通信主要解决 ： 组件A 的数据 传递给 组件B
注意：子传父的时候：第一：还是要在父给子传一个函数，子收到这个函数，在合适的时候调用这个函数，以传参的形式把东西调过去。
常见搭配形式：
6.1. 【props】
概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。
-
若 父传子：属性值是非函数。
-
若 子传父：属性值是函数。
在 父 传子 里面 传递： -
<Child :car="car" >
在 子 里面通过 props 接收
声明接收 props -
defineProps(['car']) // 然后就直接调用：<h4>父给我的车：{{ car }} </h4>
子传父 -
在 父 里面 先定义一个函数方法：
-
// 方法
function getToy(value:string){
console.log(value)
// toy.value = value
} -
在父组件里定义一个：<Child :car="car" :sendToy="getToy"> 传递给子组件
-
然后在 子 组件里面 接收：getToy ,用props 接收：defineProps(['car','getToy'])
-
然后定义一个点击函数：
-
const toy = ref('奥特曼') // 这个 toy 是子组件里面的值
-
<button @click="sentToy(toy)">玩具给父亲</button> // 注意：这里定义的 sentToy 就是指：defineProps的sentToy
-
声明接收props
-
defineProps(['car','sentToy'])
注意：这个可以不用定，如果是单独定义一个函数 <button @click="fasong(toy)">玩具给父亲</button>
let props = defineProps(['car','getToy']) // 声明接收赋值
function fasong(){
//console.log(props.sendToy)
props.sendToy()
}
父组件：
<template><div class="father"><h3>父组件，</h3><h4>我的车：{{ car }}</h4><h4>儿子给的玩具：{{ toy }}</h4><Child :car="car" :getToy="getToy"/></div>
</template>
<script setup lang="ts" name="Father">import Child from './Child.vue'import { ref } from "vue";// 数据const car = ref('奔驰')const toy = ref()// 方法function getToy(value:string){toy.value = value}
</script>
子组件
<template><div class="child"><h3>子组件</h3><h4>我的玩具：{{ toy }}</h4><h4>父给我的车：{{ car }}</h4><button @click="getToy(toy)">玩具给父亲</button></div>
</template>
<script setup lang="ts" name="Child">import { ref } from "vue";const toy = ref('奥特曼')defineProps(['car','getToy'])
</script>
