Vue3(五) 组件通信大汇总

一、props

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

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

父传子

<!--父组件-->
<Child :car="car" />
<script>
	let car = ref('奔驰')
</script>
 
<!--子组件接收数据-->
 <h4>父亲给的车：{{ car }}</h4>
 <script>
    defineProps(['car'])
</script>

子传父:
需要父提前给子传递函数，通过参数接收子传递的数据

<!--父组件-->
	<h4 v-if="toy">子组件给的玩具：{{ toy }}</h4>
	<Child :car="car" :sendToy="sendToy" />
<script>
	let toy = ref('')
	function sendToy(value: string) {
		toy.value = value
	}
</script>
 
<!--子组件传递数据-->
<button @click="sendToy(toy)">把玩具给子组件</button>
<script setup lang="ts" name="Child">
	import { ref } from 'vue'
	let toy = ref('奥特曼')
	defineProps(['car', 'sendToy'])
</script>

二、自定义事件

触发事件的语法：

 let emit = defineEmits(['函数名'])
 // 触发事件
 emit('函数名',需要传递的参数)

举例：

<!--父组件自定义事件send-toy-->
	<h4 v-show="toy">子组件传递过来的玩具：{{ toy }}</h4>
	<Child @send-toy="getToy" />
<script>
	let toy = ref('')
	function getToy(value: string) {
		toy.value = value
	}
</script>
 
<!--子组件接收数据-->
<!--触发send-toy事件，父组件进而调用了getToy函数，并收到了参数toy-->
 <button @click="emit('send-toy', toy)">玩具给父组件</button>
 <script>
   let toy = ref('奥特曼')
   // 接收之后,emit('send-toy')就是在触发事件
   let emit = defineEmits(['send-toy'])
</script>

emit接收两个事件：

let emit = defineEmits(['a','b'])

触发时：

emit('a')
emit('b')

三、mitt

消息订阅pubsub，全局事件总线$bus,mitt都是一样的思想。
接收数据的：提前绑好事件(提前订阅消息)
提供数据的：在合适的时候触发事件(发布消息)

1. 安装mitt：npm i mitt
2. 新建文件：src\utils\emitter.ts

   // 引入mitt 
   import mitt from "mitt";
   
   // 创建emitter
   const emitter = mitt()
   
   // 创建并暴露mitt
   export default emitter
   

   绑定事件：emitter.on(事件名,()=>{回调函数逻辑 })
   触发事件：emitter.emit(事件名,传递的参数)
   解绑事件：emitter.off(事件名)
   解绑所有事件：emitter.all.clear()

3. 接收数据的组件绑定事件+在组件卸载前解绑事件
   
4. 发送数据的组件触发事件
   

四、v-model

UI 组件库大量使用v-model进行通信。

1.v-model的本质

 <!-- v-model双向绑定，用在html标签上 -->
 <input type="text" v-model="username">
 <!-- 上边代码的本质是：  -->
 <!--  
	 :value="username"：实现数据到页面
	  @input...：实现页面到数据
  -->
 <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">

(<HTMLInputElement>$event.target).value其实就是$event.target.value,因为ts语法的限制，需要加断言。

2.v-model用在组件标签上

<!-- 修改modelValue -->
<ChildInput v-model="username" />
<!-- 本质是：默认写modelValue，也可以修改，修改见第3点更换modelValue -->
<ChildInput :modelValue="username" @update:modelValue="username = $event" />

:modelValue="username"：props实现父传子
@update...：类似于自定义事件，实现子传父；$event是子组件传过来的值

ChildInput 组件中：

<template>
    <!--将接收的modelValue值赋给input元素的value属性，目的是：为了呈现数据 -->
	<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件，触发时将$event.target.value通过参数传回去-->
  <input type="text" 
  :value="modelValue"
   @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)">
</template>

<script setup lang="ts" name="ChildInput">
// 接收父组件传递的值
defineProps(['modelValue'])
// 声明事件，
let emit = defineEmits(['update:modelValue'])
</script>

流程就是：

(1) 子组件将用户输入的值传给父组件：
  子组件中通过触发事件将$event.target.value的值(也就是用户输入的值)传给父组件，父组件将username的值改为用户输入的值。

(2) 用户输入的值传给子组件进而呈现在页面上：
  通过父组件的modelValue将新的username值传给子组件，子组件通过props接收后赋给input标签的value属性，呈现用户输入的数据。

3.更换modelValue

需要在v-model后加上别名

<!-- 修改modelValue -->
 <ChildInput  v-model:mima="password" />
 <!-- 本质 -->
<ChildInput :mima="username" @update:mima="username = $event" />

4.更换modelValue时，可以在组件标签上多次使用v-model

注意：

父组件中：@update:modelValue="username = $event"
子组件中： @input="emit('update:modelValue', $event.target.value)

什么时候用$event,什么时候用$event.target.value

$event是什么？什么时候能.target

1. 对于原生事件，$event就是事件对象,====>能.target
2. 对于自定义事件，$event就是触发事件时，所传递的数据,===>不能.target

五、$attrs

• 用来实现祖孙组件之间的通信。
• 当父组件向子组件通过props传值时，子组件``defineProps()只接收部分值，剩下没接收的值则存在了$attrs里。

1. 未读取的数据存在$attrs里

<!-- 父组件 -->
<div class="father">
	<h3>父组件</h3>
	<h4>a:{{ a }}</h4>
	<h4>b:{{ b }}</h4>
	<h4>c:{{ c }}</h4>
	<h4>d:{{ d }}</h4>
	<!-- v-bind="{ x: 100, y: 200 }" 等价于 :x="100" :y="200" -->
	<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" />
	<!-- 等价于 -->
	<!-- <Child :a="a" :b="b" :c="c" :d="d" :x="100" :y="200" /> -->
</div>
<!-- 子组件 -->
	<h4>a:{{ a }}</h4>
	<h4>其他：{{ $attrs }}</h4>
	<script>
		defineProps(['a'])
    </script>

2. 祖向孙传数据

<!--Father.vue-->
	<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" />

<!--Child.vue，中间组件啥也不接受，传给GrandChild-->
	<GrandChild v-bind="$attrs" />

<!--GrandChild.vue-->
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a:{{ a }}</h4>
		<h4>b:{{ b }}</h4>
		<h4>c:{{ c }}</h4>
		<h4>d:{{ d }}</h4>
		<h4>x:{{ x }}</h4>
		<h4>y:{{ y }}</h4>
	</div>
<script setup lang="ts" name="GrandChild">
	defineProps(['a', 'b', 'c', 'd', 'x', 'y'])
</script>

3. 孙向祖传数据
Father.vue:通过props传递函数

<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" :updateA="updateA" />
		<!-- 等价于 -->
<script setup lang="ts" name="Father">
	function updateA(value: any) {
		a.value = value
	}
</script>

Child.vue

<!--Child.vue，中间组件啥也不接受，传给GrandChild-->
<GrandChild v-bind="$attrs" />

GrandChild.vue:调用函数

<button @click="updateA(666)">更新A</button>
<script setup lang="ts" name="GrandChild">
	defineProps(['a', 'b', 'c', 'd', 'x', 'y', 'updateA'])
</script>

六、$refs,与￥parent

正确的是$ref与$parent,标题打这两个术语会出错。
$refs：用于父传子
$parent：用于子传父

1. 回顾标签ref属性修改组件信息

子组件1Child1.vue

<template>
	<div class="child1">
		<h3>子组件1</h3>
		<h4> 玩具：{{ toy }}</h4>
		<h4> 书籍：{{ book }}本</h4>
	</div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from 'vue';
let toy = ref('奥特曼')
let book = ref(3)
// 向外暴露出来，父组件才能读取到子组件的值
defineExpose({ toy, book })
</script>

子组件2Child2.vue结构类似：

...
<script setup lang="ts" name="Child2">
...
let computer = ref('联想')
let book = ref(6)
// 向外暴露
defineExpose({ computer, book })
</script>

父组件Father.vue修改子组件信息

<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产有{{ house }}套</h4>
		<button @click="changeToy">修改子组件1的玩具</button>
		<button @click="changeComputer">修改子组件2的电脑</button>
		<Child1 ref="c1" />
		<Child2 ref="c2" />
	</div>
</template>

<script setup lang="ts" name="Father">
	 ...
	let house = ref(4)
	// 获取到两个组件的实例对象
	let c1 = ref()
	let c2 = ref()
	
	function changeToy() {
		c1.value.toy = '小猪佩奇'
	}
	function changeComputer() {
		c2.value.computer = '华为'
	}
</script>

父组件通过ref获取子组件实例对象后，可以对其属性进行修改的前提条件时，子组件将该属性defineExpose()暴露出来。

2. $refs实现父修改所有子组件信息

父组件Father.vue：

<button @click="getAllChild($refs)">增加所有子组件的书数量</button>
<script>
	// 参数或者写成 refs:{[key:string]:any}
	function getAllChild(refs: any) {
		console.log('refs',refs);
		for (let key in refs) {
		// 修改所有子组件的书本属性
			refs[key].book += 3
		}
	}
</script>

3. $parent实现子修改父

父组件Father.vue将数据暴露出去，子组件才能获取到该属性并修改:

let house = ref(4)
defineExpose({ house })

子组件：Child1.vue

<button @click="minusHouse($parent)">卖出一套房产</button>
<script>
	function minusHouse(parent: any) {
		console.log('parent',parent);
		parent.house -= 1
	}
</script>

这里读取数据不用写.value见之前的记录。

七、provide、inject祖孙通信

$attrs实现祖孙通信了，打扰了中间层；而provide与inject不会打扰中间层。

提供数据：provide('数据或方法',数据或方法)；
接收(注入)数据：inject('数据')

1. 祖传孙

祖组件：Father.vue

<script setup lang="ts" name="Father">
	let car = ref('奔驰')
	// 传递的数据，通过provide提供
	provide('car', car)
</script>

孙组件：GrandChild.vue

  <div class="grand-child">
    <h3>我是孙组件</h3>
    <h4>车子：{{ car }}</h4>
  </div>
<script setup lang="ts" name="GrandChild">
   // 1.引入inject
	import { inject } from 'vue'
   // 2. 读取数据；
	let car = inject('car')
</script>

注意，如果接收数据时

   let car = inject('car2')

祖组件没有提供名为car2的数据，则孙组件读取到的car值是undefined;
孙组件可设置默认值

  let car = inject('car2','奥迪') // car的默认值是奥迪

2. 孙传祖

思想还是祖给孙传递函数，孙通过参数的方式来给祖传信息。

祖组件：Father.vue

<script setup lang="ts" name="Father">
import { ref, provide } from 'vue';
let money = ref(500)

function spendMoney(value: number) {
  money.value -= value
}
// 可以将数据或方法一起传递
provide('moneyContext', { money, spendMoney })
</script>

孙组件：GrandChild.vue

 <div class="grand-child">
   <h3>我是孙组件</h3>
   <h4>银子：{{ money }}万元</h4>
   <h4>车子：{{ car }}</h4>
   <button @click="spendMoney(6)">花钱</button>
 </div>

<script setup lang="ts" name="GrandChild">
	import { inject } from 'vue'
	// 解构取值
	// let { money, spendMoney } = inject('moneyContext')
	// 上面的方式会有警告，ts不确定是否会有money和spendMoney，所以给个默认值
	let { money, spendMoney } = inject('moneyContext', { money: 0, spendMoney: (param: number) => { } })
</script>

注意：为什么传递的不是money.value，而是money?

provide('moneyContext', { money.value, spendMoney })

如果传递.value，则传递的只是一个值；

八、pinia,见之前的博客

Vue3(四) pinia

九、插槽slot

回顾Vue2插槽内容Vue2插槽

1. 默认插槽

将组件标签中的html结构放入slot所在的位置

2. 具名插槽

上边的例子中，游戏列表四个字在英雄联盟等列表的上方，是因为页面结构中<h2>游戏列表</h2>在ul的上方。
如果页面结构中<h2>游戏列表</h2>在ul的下方。如何仍旧保持这样的页面效果：

采用具名插槽，通过v-slot:插槽名或#插槽名 指定要把页面结构放在哪个插槽里。

 <Category>
   <template #s2>
     <video video :src="videoUrl" controls></video>
   </template>
   <template #s1>
     <h2>今日影视推荐</h2>
   </template>
 </Category>

3. 作用域插槽

子组件Game

<template>
  <div class="game">
    <h2>游戏列表</h2>
    <!-- 需要传递的值 -->
    <slot :youxi="games" x="hh" y="hello"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
import { reactive } from 'vue';
let games = reactive([
  { id: 'asgytdfats01', name: '英雄联盟' },
  { id: 'asgytdfats02', name: '王者农药' },
  { id: 'asgytdfats03', name: '红色警戒' },
  { id: 'asgytdfats04', name: '斗罗大陆' }
])
</script>

父组件Father.vue

params包含所有参数：

总结：

1. 默认插槽：
2. 具名插槽：
   命名<slot name="xxx"></slot>;
   使用： <template #xxx>或 <template v-slot：xxx>
3. 作用域插槽
   数据在子组件身上： <slot :xxx="yyy" :n1="zzz" ></slot>
   父组件使用数据：
   <template v-slot="params"> params接收所有传递过来的数据
   <template v-slot:defalut="params"> 通过插槽名指定接收某个插槽的数据
   <template #defalut="{xxx}"> 通过#插槽名指定接收某个插槽的数据

组件通信总结