基本组件通信

组件通信

props通信—不推荐层级过深的传递

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

• 若 父传子：属性值是非函数。
• 若 子传父：属性值是函数。其实本质还是先父传子给函数，然后孩子去调用。

父组件：

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>汽车：{{ car }}</h4>
		<h4 v-show="toy">孩子给的玩具: {{ toy }}</h4>
		<Child :car = "car" :sendToy="getToy"/>
  </div>
</template>
 
<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from 'vue'
 
	//数据
	let car = ref('奔驰')
	let toy = ref('')
 
	//方法
	function getToy(value:string) {
		console.log('父', value)
		toy.value = value;
	}
</script>
 
<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
		border-radius: 10px;
	}
</style>

子组件：

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>父给的车: {{ car }}</h4>
		<button @click="sendToy(toy)">把玩具给父亲</button>
  </div>
</template>
 
<script setup lang="ts" name="Child">
	import { ref, defineProps } from 'vue'
 
	//数据
	let toy = ref('奥特曼')
 
	//声明接受props
	let props = defineProps(['car', 'sendToy'])
</script>
 
<style scoped>
	.child{
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

自定义事件—一般用于：子-->父

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

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

父组件：

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4 v-show="toy">孩子给的玩具：{{ toy }}</h4>
		<!-- test 不用括号传参的时候默认也会传递事件对象，只要你接受查看了 -->
		<!-- <button @click="test(6, $event)">点我</button> -->
 
		<!-- 绑定事件，但是需要在子组件中定义 -->
    <Child @send-toy="saveToy"/>
  </div>
</template>
 
<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import { ref } from "vue";
 
	//数据
	let toy = ref('')
 
	//方法
	function saveToy(arg:string) {
		console.log('子组件触发了事件', arg)
		toy.value = arg
	}
</script>
 
<style scoped>
	.father{
		background-color:rgb(165, 164, 164);
		padding: 20px;
    border-radius: 10px;
	}
	.father button{
		margin-right: 5px;
	}
</style>

子组件：

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<button @click="emit('send-toy', toy)">给父亲玩具</button>
  </div>
</template>
 
<script setup lang="ts" name="Child">
	import { ref, defineEmits } from "vue";
 
	//数据
	let toy = ref('奥特曼')
 
	//声明事件
	const emit = defineEmits(['send-toy'])
</script>
 
<style scoped>
	.child{
		margin-top: 10px;
		background-color: rgb(76, 209, 76);
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>

mitt—可以实现任意组件通信

参考地址：https://github.com/developit/mitt?tab=readme-ov-file#on

​ 概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。使用建议：可以编写一个工具类进行统一管理，看需求

安装

npm i mitt

配置

​ 文件位于 /src/utils/emitter.ts

// 引入mitt
import mitt from 'mitt'
 
// 调用mitt得到emitter，emitter能：绑定事件、触发事件
const emitter = mitt()
 
// 暴露emitter
export default emitter

以兄弟通信为例

兄弟一

<template>
  <div class="child1">
    <h3>子组件1</h3>
		<h4>玩具: {{ toy }}</h4>
		<button @click="emitter.emit('send-toy', toy)">玩具给弟弟</button>
  </div>
</template>
 
<script setup lang="ts" name="Child1">
	import {ref} from 'vue'
	import emitter from '@/utils/emitter'
 
	//数据
	let toy = ref('奥特曼')
</script>
 
<style scoped>
	.child1{
		margin-top: 50px;
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
	.child1 button{
		margin-right: 10px;
	}
</style>

兄弟二：

<template>
  <div class="child2">
		<h3>子组件2</h3>
		<h4>电脑: {{ computer }}</h4>
		<h4 v-show="toy">哥哥给的玩具: {{ toy }}</h4>
  </div>
</template>
 
<script setup lang="ts" name="Child2">
	import {onUnmounted, ref} from 'vue'
	import emitter from '@/utils/emitter'
 
	//数据
	let computer  = ref('联想')
	let toy = ref('')
 
	//mitt事件订阅
	emitter.on('send-toy', (value) => {
		console.log('send-toy', value)
		toy.value = value
	})
 
	onUnmounted(() => {	//注意在组件卸载的时候关闭订阅
		emitter.off('send-toy')
	})
</script>
 
<style scoped>
	.child2{
		margin-top: 50px;
		background-color: orange;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>