Vue3系列：6、组件通信

6. 组件通信

Vue3组件通信和Vue2的区别：

• 移出事件总线，使用mitt代替。

• vuex换成了pinia。
• 把.sync优化到了v-model里面了。
• 把$listeners所有的东西，合并到$attrs中了。
• $children被砍掉了。

常见搭配形式：

6.1. 【props】

概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。

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

父组件：

<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('奥特曼');
	
	// script中使用props
	// console.log(thisProps .car);
	
	const thisProps = defineProps(['car','getToy'])
</script>

6.2. 【自定义事件】

1. 概述：自定义事件常用于：子 => 父。
2. 注意区分好：原生事件、自定义事件。

• 原生事件：
  • 事件名是特定的（click、mosueenter等等）
  • 事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
• 自定义事件：
  • 事件名是任意名称
  • 事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！

3. 示例：

   <!--在父组件中，给子组件绑定自定义事件：-->
   <Child @send-toy="toy = $event"/>
   
   <!--注意区分原生事件与自定义事件中的$event-->
   <button @click="toy = $event">测试</button>
   

   //子组件中，触发事件：
   this.$emit('send-toy'