目录

一、props (父传子，子传父)

------Vue2

------Vue3

从Vue2(组合式API)和Vue3（选择式API）两个版本对每个组件间通信方式进行讲解：

一、props (父传子，子传父)

------Vue2

父组件：

<template><div><child :childValue="parentValue" :childFunc="fatherFunc"></child></div>
</template>
<script>
import Child from './Child.vue'export default{components:{Child },data(){
return{parentValue:"儿子，我是爸爸"}
},methods:{fatherFunc(data){console.log("儿子："，data,"爸爸："，'hello，儿子！')}}
}
</script>

子组件：

<template><div><p>{{childValue}}</p><button @click="baba">儿子呼唤道：“爸爸!”</button>
</div>
</template>
<script>export default{props:["childValue","childFunc"],//childValue只能读取，不能被修改data(){return{papa"爸爸！"}},methods:{baba(){this.childFunc(this.papa)；}}
}
</script>

页面最终结果展示：儿子，我是爸爸，

控制台显示结果：儿子：爸爸！爸爸：hello，儿子！

props可以传数组也可以传对象，详情可以到Vue官网查看入门手册。

------Vue3 

父组件：

<template><div><child :childValue="parentValue" :childFunc="fatherFunc"></child></div>
</template>
<script setup lang="ts">
import Child from "./Child.vue"
import {ref} from "vue"
let parentValue = ref("爸爸！")；
let fatherFunc=(data)=>{console.log("儿子："，data,"爸爸："，'hello，儿子！')}
</script>

子组件：

<template><div>
{{props.childValue}}//props可以省略，直接写childValue
<button @click="handleClick">点击</button>
</div> 
</template>
<script setup lang="ts">
let props=defineProps(["childValue","childFunc"]) //childValue只能读取，不能被修改
let handleClick=props.childFunc(props.childValue);
</script>

页面展示的结果：爸爸！

控制台展示结果：儿子：爸爸！爸爸：hello，儿子！