Vue3从入门到实战：深度掌握组件通信（上部曲）

悠悠 2024-04-26 01:49 80阅读 0赞

**props的概念：**

当你使用Vue 3的组合式API时，props就是一种让你可以从父组件向子组件传递数据的方式。你可以想象成你在给子组件写一封信，把需要传递的信息放在信封里。

在Vue 3中，你可以在子组件的代码中定义props，就像在信封上写下你需要传递的信息的名字。你可以指定每个props的类型，比如是字符串、数字等等，这样Vue就会帮你确保接收到的数据是正确的类型。

你还可以指定props是否是必需的，就像是你在信封上写着"必须打开"，这样别人在使用你的组件时就必须传递这个props，否则会出现警告。

如果你给props设置了默认值，就像是在信封里放了一张字条，如果别人没有传递这个props，那么组件就会使用默认值。

当父组件给子组件传递了props，子组件就可以在自己的代码中使用这些props了，就像是打开了你传递的信封，取出里面的信息。你可以根据需要对这些props进行处理和计算，就像是读取信中的内容并进行一些操作。

假设在App组件的框架下，里面有众多的组件，其中A组件的数据和B组件如何进行交互呢？

答案：组件通信

![44c9b48322cb465d8c4ea422ee29b130.png][]

## 1.组件通信方式1-props ##

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

如图：左边是父组件，右边是子组件

![f2549bdb0c184dc887ccad0196372cd9.png][]

![b98f663aefe5466794fad2e238895b55.png][]

--------------------

若 \*\*子传父\*\*：属性值是\*\*函数\*\*。

子传父：

1.  接受子子组件传来的东西需要提前定义一个方法getToy
2.  把getToy传给子组件
3.  子那边要照样接收
4.  直接使用父传来的，记得要加参数

![bcb1e0f794044267af872cb75228c74d.png][]

![9bba1f9572b842f583f3fcbf50333926.png][]

**Child.vue子组件代码：**

<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} from 'vue'
    	// 数据
    	let toy = ref('奥特曼')
    	// 声明接收props
    	defineProps(['car','sendToy'])
    </script>
    
    <style scoped>
    	.child{
    		background-color: skyblue;
    		padding: 10px;
    		box-shadow: 0 0 10px black;
    		border-radius: 10px;
    	}
    </style>

--------------------

**Father.vue父组件代码**

<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){
    		toy.value = value
    	}
    </script>
    
    <style scoped>
    	.father{
    		background-color:rgb(165, 164, 164);
    		padding: 20px;
    		border-radius: 10px;
    	}
    </style>

补充：

v-show指v的是如果不点击按钮，就没有参数接受，就不会显示信息，否则则显示出来

![27baa73f918b4d9884364a5be1e6c0db.png][]

![354dadd264084fe78bf11fa324f59b41.png][]

## 2.组件通信方式2-自定义事件 ##

**自定义事件的概念：**

当我们在Vue 3中需要让组件之间进行通信时，可以使用自定义事件。可以把自定义事件想象成人与人之间的交流，就像你和朋友之间通过说话来传递信息一样。

在Vue 3中，我们可以在一个组件中触发自定义事件，就像你向朋友说出一句话一样。你可以使用`$emit`方法来触发事件，并传递一些数据作为事件的参数。

而在另一个组件中，你可以监听并响应这个自定义事件，就像是朋友听到你的话后做出回应。你可以使用`$on`方法来监听事件，并在事件触发时执行相应的逻辑。

通过自定义事件，不同的组件可以进行灵活的交流和信息传递，就像是人们通过说话来相互沟通。这样就可以实现组件之间的解耦，让它们能够独立地进行通信。

概述：自定义事件常用于：**子 => 父。**

1.  给子组件绑定了一个send-toy事件，只要点击就会调用saveToy，这就是自定义事件
2.  如何触发send-toy事件呢？在子组件defineEmits声明中放入该事件
3.  然后只要调用emit('send-toy')就可以触发了

![2b9d1b4a92624466930a352b8081005b.png][]

![fcf94ab7641b42ae8e304fb1af910ccb.png][]

![2c88cec9183a4d9895b82b53834c3eda.png][] **Child.vue子组件代码：**

<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 } 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>

--------------------

**Father.vue父组件代码：**

<template>
      <div class="father">
        <h3>父组件</h3>
    		<h4 v-show="toy">子给的玩具：{
       { toy }}</h4>
    		
        <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(value:string){
    		console.log('saveToy',value)
    		toy.value = value
    	}
    </script>
    
    <style scoped>
    	.father{
    		background-color:rgb(165, 164, 164);
    		padding: 20px;
        border-radius: 10px;
    	}
    	.father button{
    		margin-right: 5px;
    	}
    </style>

## 3.组件通信方式3-mitt ##

**mitt的概念：**

"Mitt" 是一个小而灵活的JavaScript库，用于在应用程序中处理事件的订阅和发布。可以把它想象成一个事件调度中心，就像是一个小管家，帮助不同的组件之间进行信息传递和交流。

当我们需要在应用程序中的不同部分之间传递消息时，可以使用 "Mitt" 来管理这些消息。它提供了一种简单的方式来订阅事件和触发事件。

假设你有几个组件，它们需要相互通信。你可以创建一个 "Mitt" 的实例，就像是雇佣了一个小管家。然后，你可以让组件们通过 "Mitt" 的实例来订阅事件，就像是告诉小管家：“如果有人说了某个事件，告诉我一声”。

当某个组件需要发送一个事件时，它可以通过 "Mitt" 的实例来触发该事件，就像是对小管家说：“有人说了某个事件，快去告诉其他组件”。

然后，其他组件就会收到这个事件，并可以根据需要做出响应，就像是收到小管家传递的消息后采取相应的行动。

"Mitt" 的好处在于它的简洁性和灵活性。它不依赖于任何特定的框架或库，可以在各种环境中使用。它是一个轻量级的解决方案，但非常实用，可以帮助你构建松散耦合的应用程序，让组件之间的通信更加方便和可靠。

![fc5dcee5ba734a69bdf573694bb5c432.png][]

通过mitt可以任意组件传递数据

比如如下的A组件通过绑定emitter，然后B组件触发emitter就可以获得A组件数据，爽完。

$event.target  
event是触发对象事件，target是发生三个事件的本体

双向绑定：页面和控制台绑定，即在那面修改信息，另外也会发生变化

概述：与消息订阅与发布（\`pubsub\`）功能类似，可以实现任意组件间通信。  
**1.安装`mitt`**

>     npm i mitt

![ee38f48aaee2485bb46862b630e7c0f0.png][]

**2.新建文件：`src\utils\emitter.ts`**

**emitter.ts文件代码：**

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

**3.接收数据的组件中：绑定事件、同时在销毁前解绑事件**

![d2ef4116b81946d283b9e60058523dac.png][]

--------------------

## 4.组件通信方式4-v-model （重点） ##

**v-model的概念：**

当我们在构建一个交互性的网页或应用程序时，很常见的需求是让用户能够输入数据并与之进行交互。Vue中的 `v-model` 就是为了解决这个需求而设计的。

想象一下你有一个输入框，用户可以在里面输入文本。你希望能够获取用户输入的值，并将其保存到Vue实例中的一个数据属性中，以便后续使用。同时，你也希望当你在Vue实例中修改了这个数据属性的值时，输入框中的内容也能够自动更新。

这就是 `v-model` 的作用啦！它是Vue中的一个特殊指令，让你可以将输入框和Vue实例中的数据属性绑定在一起，实现双向的数据绑定。

当你在输入框中输入文本时，`v-model` 会自动将输入的值保存到Vue实例中的数据属性中。而当你在Vue实例中修改了这个数据属性的值时，`v-model` 会自动将最新的值显示在输入框中。

这就像是你和Vue实例之间建立了一条数据的通道：你可以通过输入框向Vue实例发送数据，同时也可以通过修改Vue实例中的数据属性来控制输入框的内容。

需要注意的是，`v-model` 并不仅限于输入框，还可以用于复选框、单选按钮等表单元素，甚至是自定义的组件。

### 4.1 v-model用在html标签上 ###

**1.双向绑定：控制台的信息能显示在页面上，同时哪边被修改了都可以同步。**

![cb8e9f8cfbb24286b80f70292bcbfde1.png][]

**2.控制台数据的信息呈现在页面上**

![a427ce6664284f9d84368b5b69383907.png][]

**3.在页面修改信息，控制台数据同步信息**

![f04e7e3dd63145bfad0359ac568cc9b7.png][]

这里是程序员要写的v-model的代码：

其实这段代码的本质是：

<input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">

**底层原理是****动态的value值和input事件**

这两段代码是等价的

补充：

为什么报警告呢？

输入担心不是html输入类型的元素。所有要<HTMLInputElement>来断言告诉它不用担心。

![222d0ece485f48369ccb3354e95d260d.png][]

--------------------

### **4.2. v-model用在组件标签上**  ###

我们先写一个组件：

该组件的作用是改变输入框的样式。

<template>
      <input 
        
      >
      <br>
      <input 
       
      >
    </template>
    
    <script setup lang="ts" name="MyInput">
      
    </script>
    
    <style scoped>
      input {
        border: 2px solid black;
        background-image: linear-gradient(45deg,red,yellow,green);
        height: 30px;
        font-size: 20px;
        color: white;
      }
    </style>

然后在father.vue组件增添代码：

这段代码的本质：

：modelvalue传过来"username"，实现控制台数据呈现到页面上

@update:modelValue只是事件名，它绑定username这个事件

然后在MyInput.vue组件上修改：

1.用defineProps把modelvalue名接收了

2.呈现在input输入框中

上面两步是把控制台数据呈现到页面。

![a80befb26e9349cd9c5f323970f6043c.png][]

![335dadfc722b4b1fbed1e66ac2c36660.png][]

3. 用defineEmits把input事件里的update:modelValue接收了

4.同理，把它用在输入框中。

上面两步代码是在页面上修改数据时，也可以绑定控制台数据

![8420fd7a432241bfaa9e787e39eb6f84.png][]![7db7c5366c49477ea319d93399c287b1.png][]

其实MyInput.vue类似UI库里面的组件，我这么写是为了解释<MyInput v-model="username"/>底层逻辑的实现，实际开发中，直接写<MyInput v-model="username"/>就好了。

补充：

$event到底是啥? 啥时候能.target？  
对于原生事件，$event就是事件对象 =====>能.target  
对于自定义事件，$event就是触发事件时，所传递的数据 ==>不能target

**MyInput.vue代码：**

<template>
      <input 
        type="text" 
        :value="modelValue"
        @input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"
    
      >
    </template>
    
    <script setup lang="ts" name="MyInput">
    defineProps(['modelValue'])
      const emit = defineEmits(['update:modelValue'])
    </script>
    
    <style scoped>
      input {
        border: 2px solid black;
        background-image: linear-gradient(45deg,red,yellow,green);
        height: 30px;
        font-size: 20px;
        color: white;
      }
    </style>

--------------------

**Father.vue文件代码：**

<template>
      <div class="father">
        <h3>父组件</h3>
        
        
    
       
    
      </div>
    </template>
    
    <script setup lang="ts" name="Father">
    	import { ref } from "vue";
      import MyInput from './MyInput.vue'
      // 数据
      let username = ref('zhansgan')
    </script>
    
    <style scoped>
    .father {
      padding: 20px;
      background-color: rgb(165, 164, 164);
      border-radius: 10px;
    }
    </style>

###  ###

### 4.3v-model的细节 ###

<MyInput v-model:ming="userName"/>
    
    
    <MyInput :ming="uerName" @update:ming="userName = $event"/>

**MyInput.vue文件中代码：**

<template>
      <input 
        type="text" 
        :value="modelValue"
        @input="emit('update:ming',(<HTMLInputElement>$event.target).value)"
    
      >
    </template>ming
    
    <script setup lang="ts" name="MyInput">
    defineProps(['ming'])
      const emit = defineEmits(['update:ming'])
    </script>
    
    <style scoped>
      input {
        border: 2px solid black;
        background-image: linear-gradient(45deg,red,yellow,green);
        height: 30px;
        font-size: 20px;
        color: white;
      }
    </style>

如果`value`可以更换，那么就可以在组件标签上多次使用`v-model`

比如：

##  ##

![cdb13a42e87243c29d73b51f7f4cdde0.png][]

[44c9b48322cb465d8c4ea422ee29b130.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3af3b3a55af34fa0a1ba5c88fa9c4075.png
[f2549bdb0c184dc887ccad0196372cd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4774583562da4ce886d4c140b4c34642.png
[b98f663aefe5466794fad2e238895b55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/748676ca0f644aa49a6274cb60212fe0.png
[bcb1e0f794044267af872cb75228c74d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/950d0cbffb6246b2babb03ed21b35e4b.png
[9bba1f9572b842f583f3fcbf50333926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/37974c49d7804914a5be4d4ce1e3a3d4.png
[27baa73f918b4d9884364a5be1e6c0db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8b2ce9f0cc854004aab484c81cbe07d6.png
[354dadd264084fe78bf11fa324f59b41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/04ee2c4686904a77b4ccf4fb93f82b3f.png
[2b9d1b4a92624466930a352b8081005b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/faed17a2cfc544bea663bfb444e96baa.png
[fcf94ab7641b42ae8e304fb1af910ccb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/08d92c8f742c43e3bbccb41355b117dc.png
[2c88cec9183a4d9895b82b53834c3eda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ee559756d0474a3990bf8f398ba6e4d4.png
[fc5dcee5ba734a69bdf573694bb5c432.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a2972428bef54bdbaf66d60f2df1df9b.png
[ee38f48aaee2485bb46862b630e7c0f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/376a88dcc7bf46638e929a94bfc6823a.png
[d2ef4116b81946d283b9e60058523dac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5fe4807574a0478f9b04cc41f63c6972.png
[cb8e9f8cfbb24286b80f70292bcbfde1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5f83172571cf4d22a9ef7254313c01ef.png
[a427ce6664284f9d84368b5b69383907.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ceeb97bb37b941c9a8f94a48a8c94c34.png
[f04e7e3dd63145bfad0359ac568cc9b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3c1ba6e1e41b40c68dea2b4a262b4bff.png
[222d0ece485f48369ccb3354e95d260d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/941df5d525cc4daeabc7819973460754.png
[a80befb26e9349cd9c5f323970f6043c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8fef3647bc634aee91e783ad8ab8bffc.png
[335dadfc722b4b1fbed1e66ac2c36660.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9b797b6656f74fa28b15192fed81e550.png
[8420fd7a432241bfaa9e787e39eb6f84.png]: https://img-blog.csdnimg.cn/direct/8420fd7a432241bfaa9e787e39eb6f84.png
[7db7c5366c49477ea319d93399c287b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f4cc52271fb54c4fa1b9a6a11bf67dd0.png
[cdb13a42e87243c29d73b51f7f4cdde0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7d3b52f4d8e14bd989ee15d4ccd558a0.png