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

逃离我推掉我的手 2024-04-26 01:51 71阅读 0赞

## 5.组件通信方式5-$attrs ##

**$attrs的概念：**

在Vue中，`$attrs` 是一个特殊的属性，用于访问父组件向子组件传递的非特定属性。它可以让子组件轻松地获取父组件传递的属性，而无需在子组件中显式声明这些属性。

想象一下你有一个父组件和一个子组件，你希望通过属性将一些数据从父组件传递到子组件。通常情况下，你需要在子组件中定义这些属性，然后通过父组件将数据传递给子组件。

但是，有时候你可能希望传递一些额外的属性，这些属性在子组件中并没有声明。这时候，`$attrs` 就派上用场了。

当你在父组件中将属性传递给子组件时，如果子组件没有显式声明这些属性，那么这些属性会被收集到 `$attrs` 对象中。子组件可以通过访问 `$attrs` 来获取这些传递的额外属性。

这就好像是你在给子组件写一封信时，除了信中明确提到的事项外，你还可以附带一些额外的内容。而子组件可以通过查看信的附件来获取这些额外的内容。

通过使用 `$attrs`，子组件可以轻松地访问父组件传递的这些额外属性，而无需在子组件中显式声明它们。这样可以使得组件之间的通信更加灵活和方便。

### 5.1父组件传孙组件 ###

概述：`$attrs`用于实现**当前组件的父组件**，向**当前组件的子组件**通信（**祖→孙**）。

![8c02648dd4fd4193b8221f7e268f4876.png][]

此时需要建立这三个组件

**1.父组件（Father.vue）**

![06efe7a9bd0e4d21a631424576fccf6d.png][]

**2.子组件(Child.vue)**

![ff7809fa80cd4c5c829cfd100d3930db.png][]

**3.孙组件(GrandChild.vue)**

![ce97ebc4a09d451cb8006449917199ec.png][]

**1. 在Father.vue文件里面增添一些响应式数据**

![d17be6e2865545048dc97c8137d57067.png][] **2.先从父组件传来给子组件**

![ed8259ac782b4d96994236bab5fde968.png][]

**3.实现组件再传给孙组件，孙组件在接收即可**

![accf6283a4c945b892e863f2349c5fbb.png][]实现效果：![7680dc9635d0414da7a1887ce4854a7f.png][]

###  **5.2孙组件传给父组件** ###

现在我们让孙组件可以传递一个参数，让父组件的响应式a接收这个参数

**1.定义一个updataA方法**

**2.放在子组件进行接收**

![fe33c4942522483a8737720883a8e1ab.png][]

3.子组件内容不用变

4.孙组件内容增添

![734e0267dbb548b382bdc5ecfed279fc.png][]

![0f2ebae9045b4e30b5a1cf4256d8fae0.png][]

![125848db0aa14060a880b00a8eeca740.png][]

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

## 6.组件通信方式6-$refs、$parent ##

**$refs、$parent的概念：**

在Vue中，`$refs` 和 `$parent` 是用于在组件之间进行通信的特殊属性。

首先，让我们来了解 `$refs`。当你在Vue模板中给一个元素或组件添加 `ref` 属性时，你就可以通过 `$refs` 来访问该元素或组件的引用。简单来说，`$refs` 就像是给元素或组件起了一个名字标签，让你可以在Vue实例中轻松地引用它们。

想象一下你有一个组件，里面有一个按钮元素，你希望在Vue实例中能够获取到这个按钮并进行一些操作。你可以在按钮上添加一个 `ref` 属性，比如 `ref="myButton"`。然后，你就可以通过 `$refs.myButton` 来访问这个按钮了。

`$refs` 是一个对象，它的属性名就是你在 `ref` 属性中指定的名字，而对应的属性值就是对应的元素或组件的引用。通过访问 `$refs` 属性，你就可以像操作普通的DOM元素一样操作引用的元素或组件。

接下来，我们来看看 `$parent`。在Vue组件的层级结构中，每个组件都可以有一个父组件。当你需要在子组件中访问父组件的数据或方法时，可以使用 `$parent`。

想象一下你有一个父组件和一个子组件，你希望在子组件中获取父组件的某个属性或调用父组件的方法。你可以通过 `$parent` 来实现这个目标。

`$parent` 是一个特殊属性，它可以让你在子组件中访问父组件实例。通过 `$parent`，你可以直接访问父组件的数据属性或方法，就好像你是在父组件内部一样。

1.  概述：
    
     *  `$refs`用于 ：**父→子。**
     *  `$parent`用于：**子→父。**
2.  原理如下：

![288fb3f89e7849bd94c4f76ee14933b1.png][]

此时需要建立这三个组件

1.父组件（Father.vue）

2.子组件1（Child1）

3.子组件2（Child2）

![3ac2c6513e8c4d03ad2ddb891813c199.png][]

![2865f3d0279e40268052e2a4afc9de9e.png][]**分别给这三个组件增添点响应式数据**

![c3000bb4224949d5a426c30bbb16bc99.png][]

![65334efcadeb492d89a56cdf5b27b42d.png][]

![2a42ba191dd14fe082634c7a86d22c72.png][]

![d86b57df125845c4b9fd2688987f4478.png][]

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

### 6.1在父组件修改子组件的内容 ###

现在要在父组件设置一个按钮，点击按钮可以将Child的"奥特曼"修改成"小猪佩奇"

**1.在子组件（Chiled1）中用defineExpose（）将要给的数据暴露出去。**

![dd4f165980654e5aa28d67038c2bbf72.png][]

**2.父组件用ref接收并修改**

![d8445624338c4f24858695fa6a232fa4.png][]

![9692eac8e09442fb867db3bacb56ed1d.png][]

![4b4ab81423bb423c8a1d622bff4f748f.png][]

同理

父亲组件通过按钮将Child2组件的电脑"联想"修改成”华为“

跟上面步骤一样，就不赘述了

### **6.2在父组件用$ref修改所有子组件**  ###

**1.在父组件通过点击事件的$refs将所有的孩子组件的书都增添三本**

![1dd31ccf14584477b8f358de1f44d2d5.png][]

2.所有孩子组件都要将书这个数据暴露出去

![ddf0a4e2e9b94f74ad19c9c13e378a98.png][]

### 6.3在子组件用$parent修改父组件 ###

现在在Child1上通过一个按钮，将父亲的房产减一。

**1.在点击事件上用$parent接收父组件实例**

![beba7ff2240f49ba96f6db11f5ade45e.png][]

**2.在父组件同样要暴露出来**

![c69bb555db8943c5943b7df9b51e8f84.png][]

![a3b42e3abb0d42799c0a9304998865a0.png][]

![a9fdcccc058441fe9dfa14486da6773c.png][]

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

**Father.vue代码：**

<template>
    	<div class="father">
    		<h3>父组件</h3>
    		<h4>房产：{
       { house }}</h4>
    		<button @click="changeToy">修改Child1的玩具</button>
    		<button @click="changeComputer">修改Child2的电脑</button>
    		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
    		<Child1 ref="c1"/>
    		<Child2 ref="c2"/>
    	</div>
    </template>
    
    <script setup lang="ts" name="Father">
    	import Child1 from './Child1.vue'
    	import Child2 from './Child2.vue'
    	import { ref,reactive } from "vue";
    	let c1 = ref()
    	let c2 = ref()
    
    	// 数据
    	let house = ref(4)
    	// 方法
    	function changeToy(){
    		c1.value.toy = '小猪佩奇'
    	}
    	function changeComputer(){
    		c2.value.computer = '华为'
    	}
    	function getAllChild(refs:{[key:string]:any}){
    		console.log(refs)
    		for (let key in refs){
    			refs[key].book += 3
    		}
    	}
    	// 向外部提供数据
    	defineExpose({house})
    </script>
    
    <style scoped>
    	.father {
    		background-color: rgb(165, 164, 164);
    		padding: 20px;
    		border-radius: 10px;
    	}
    
    	.father button {
    		margin-bottom: 10px;
    		margin-left: 10px;
    	}
    </style>

**Child1.vue代码:**

<template>
      <div class="child1">
        <h3>子组件1</h3>
    		<h4>玩具：{
       { toy }}</h4>
    		<h4>书籍：{
       { book }} 本</h4>
    		<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
      </div>
    </template>
    
    <script setup lang="ts" name="Child1">
    	import { ref } from "vue";
    	// 数据
    	let toy = ref('奥特曼')
    	let book = ref(3)
    
    	// 方法
    	function minusHouse(parent:any){
    		parent.house -= 1
    	}
    
    	// 把数据交给外部
    	defineExpose({toy,book})
    
    </script>
    
    <style scoped>
    	.child1{
    		margin-top: 20px;
    		background-color: skyblue;
    		padding: 20px;
    		border-radius: 10px;
        box-shadow: 0 0 10px black;
    	}
    </style>

**Child2.vue代码:**

<template>
      <div class="child2">
        <h3>子组件2</h3>
    		<h4>电脑：{
       { computer }}</h4>
    		<h4>书籍：{
       { book }} 本</h4>
      </div>
    </template>
    
    <script setup lang="ts" name="Child2">
    		import { ref } from "vue";
    		// 数据
    		let computer = ref('联想')
    		let book = ref(6)
    		// 把数据交给外部
    		defineExpose({computer,book})
    </script>
    
    <style scoped>
    	.child2{
    		margin-top: 20px;
    		background-color: orange;
    		padding: 20px;
    		border-radius: 10px;
        box-shadow: 0 0 10px black;
    	}
    </style>

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

## 7.组件通信方式7-provide、inject ##

**provide、inject的概念：**

在Vue中，`provide` 和 `inject` 是一对用于实现祖先组件向后代组件传递数据的特殊选项。

首先，让我们来了解 `provide`。当你在祖先组件中使用 `provide` 选项时，你可以定义一些数据或方法，并将它们提供给后代组件。简单来说，`provide` 就像是祖先组件向后代组件提供了一些东西，就像你给孩子准备了一些礼物。

想象一下你有一个祖先组件，里面有一些数据或方法，你希望能够将它们传递给后代组件使用。你可以在祖先组件中使用 `provide` 选项来定义这些数据或方法，然后在后代组件中使用 `inject` 来接收它们。

接下来，我们来看看 `inject`。当你在后代组件中使用 `inject` 选项时，你可以接收祖先组件通过 `provide` 提供的数据或方法。简单来说，`inject` 就像是后代组件从祖先组件那里接收了一些礼物。

`inject` 是一个特殊选项，它允许你在后代组件中接收祖先组件提供的数据或方法。通过使用 `inject`，你可以像在后代组件中普通的数据属性一样使用这些从祖先组件传递过来的数据或方法。

使用 `provide` 和 `inject` 可以让你在组件层级结构中方便地共享数据或方法，而无需通过逐层传递 props 或事件来实现。这对于跨多个层级的组件之间的通信非常有用。

1.  概述：实现**祖孙组件**直接通信
2.  具体使用：
    
     *  **在祖先组件中通过`provide`配置向后代组件提供数据**
     *  **在后代组件中通过`inject`配置来声明接收数据**

这里创建三个组件

此时需要建立这三个组件

**1.父组件（Father.vue）**

![beb7f3a6ee9c47aa8807bf22977f024a.png][]

**2.子组件（Child）**

![cab2599c86b7417c9be4b5822e0efb8c.png][]

**3.孙组件（GrandChild）**

![2e8f794370bf455e8fb22cec0b139602.png][]

**展现：**

![35f836507d184122a62118e3371c4df1.png][]

在这里的子组件没什么作用，只是为了突出父组件可以直接传数据给孙组件时，可以不像$attrs一样要打扰到子组件。

### 7.1父组件给孙组件传数据 ###

现在开始传数据啦

**1.在父组件用provide提供数据给子组件**

![4fffcfb612614b5dae0c6f387a02c9bc.png][]

**2.在子组件用inject接收数据**

注意：先把上面父组件的‘qian’ 换成‘money’，‘che’换成‘car’  
前期是为了区分，现在不用了

![b3495ae68643498ab271ffcc721180e9.png][]

### 7.2孙组件给父组件传数据 ###

现在在孙组件通过一个按钮可以修改父组件的money

**1.在父组件修改内容**

![ed40984da2584d84ad0538f1fbf1979d.png][]

补充：

在上面图的第二步，provide中，money不要加上.value，不然，就不会是响应式了

比如：

![ec61a97a72b14652a7607ef5eac78b57.png][]

![7bab2840cff446af9ff34c7e1f327b9d.png][]

**2.在子组件中修改内容**

![fa6260e2f7974929971321aa6285d1f9.png][]

**显示：**

![971a77a44b2e4b9a8b440cb91f6a9c2a.png][] ![7676ce63ec0144cb9c22cf5e6cf613da.png][]

最后，子组件都没有用上，所以只是想告诉你，父组件给孙组件传递数据可以不影响子组件

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

<template>
      <div class="father">
        <h3>父组件</h3>
        <h4>银子：{
       { money }}万元</h4>
        <h4>车子：一辆{
       {car.brand}}车，价值{
       {car.price}}万元</h4>
        <Child/>
      </div>
    </template>
    
    <script setup lang="ts" name="Father">
      import Child from './Child.vue'
      import {ref,reactive,provide} from 'vue'
    
      let money = ref(100)
      let car = reactive({
        brand:'奔驰',
        price:100
      })
      function updateMoney(value:number){
        money.value -= value
      }
    
      // 向后代提供数据
      provide('moneyContext',{money,updateMoney})
      provide('car',car)
    
    </script>
    
    <style scoped>
      .father {
        background-color: rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
      }
    </style>

**孙组件(GrandChild.vue)代码：**

<template>
      <div class="grand-child">
        <h3>我是孙组件</h3>
        <h4>银子：{
       { money }}</h4>
        <h4>车子：一辆{
       {car.brand}}车，价值{
       {car.price}}万元</h4>
        <button @click="updateMoney(6)">花爷爷的钱</button>
      </div>
    </template>
    
    <script setup lang="ts" name="GrandChild">
      import { inject } from "vue";
    
      let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
      let car = inject('car',{brand:'未知',price:0})
    </script>
    
    <style scoped>
      .grand-child{
        background-color: orange;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px black;
      }
    </style>

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

## 8.pinia ##

[Vue3从入门到实战：掌握状态管理库pinia（上部分）-CSDN博客][Vue3_pinia_-CSDN]

[Vue3从入门到实战：掌握状态管理库pinia（下部分）-CSDN博客][Vue3_pinia_-CSDN 1]

![af5998b386204a64ab2549109bb08db0.png][]

[8c02648dd4fd4193b8221f7e268f4876.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ef8185c5c8ec4b9cb72a57dcddd1f563.png
[06efe7a9bd0e4d21a631424576fccf6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b480f0b6466448a9844ba27c520adc0a.png
[ff7809fa80cd4c5c829cfd100d3930db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f2861f89bddf4e3580be3b4c9c107557.png
[ce97ebc4a09d451cb8006449917199ec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/84b4a6c2a09742138cf907ea170549e5.png
[d17be6e2865545048dc97c8137d57067.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9a9332bde89c499695e43748dae2f57c.png
[ed8259ac782b4d96994236bab5fde968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/57216534cb8147658df452aa3e7eaaf0.png
[accf6283a4c945b892e863f2349c5fbb.png]: https://img-blog.csdnimg.cn/direct/accf6283a4c945b892e863f2349c5fbb.png
[7680dc9635d0414da7a1887ce4854a7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/19083abdf9634469ac4e240ee7dd65f7.png
[fe33c4942522483a8737720883a8e1ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e030bbc2e603458894ee8b7a8831210c.png
[734e0267dbb548b382bdc5ecfed279fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e04cf3585ce3476cbebae6f85ad156b0.png
[0f2ebae9045b4e30b5a1cf4256d8fae0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/92d98fe14a4e490cb93b9ba1667c775f.png
[125848db0aa14060a880b00a8eeca740.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dcc838a196ef459094b2c921b7741bf5.png
[288fb3f89e7849bd94c4f76ee14933b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b06db535fc1a40bebdc03f36abd27251.png
[3ac2c6513e8c4d03ad2ddb891813c199.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/573f7b2ee73a482082d217e5774aa7c0.png
[2865f3d0279e40268052e2a4afc9de9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7beb3d0dfde1421eb8cd7fb90405cf42.png
[c3000bb4224949d5a426c30bbb16bc99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fa36a041897f4d579dc6fa228bb7a76c.png
[65334efcadeb492d89a56cdf5b27b42d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5e906a3f2ac44b7797df9fb2db987600.png
[2a42ba191dd14fe082634c7a86d22c72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/318dfedc61334a53a76da82647941370.png
[d86b57df125845c4b9fd2688987f4478.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/14a9538040a0459e996f59f7ca7aa892.png
[dd4f165980654e5aa28d67038c2bbf72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/77a130a7660f42408664a991753ea2b3.png
[d8445624338c4f24858695fa6a232fa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1850308a1ac845adb7e8031fd1f5bb1f.png
[9692eac8e09442fb867db3bacb56ed1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/31d03fe5d0f44243b6f022e32de7878e.png
[4b4ab81423bb423c8a1d622bff4f748f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/baee4fb3fb234006b7833569bc900c87.png
[1dd31ccf14584477b8f358de1f44d2d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/78857c94e4c64b0390f99c7228eb3677.png
[ddf0a4e2e9b94f74ad19c9c13e378a98.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c2d830c5698645499b67b725d55336b3.png
[beba7ff2240f49ba96f6db11f5ade45e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1ea0018277e1445b85b2b9f4a80d823e.png
[c69bb555db8943c5943b7df9b51e8f84.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ebc70cd734ef4d1da6315efc09e4da22.png
[a3b42e3abb0d42799c0a9304998865a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9f3714e4dbc44a239a1cc10882935230.png
[a9fdcccc058441fe9dfa14486da6773c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d5fbdce243aa4466bae46e433d19bb60.png
[beb7f3a6ee9c47aa8807bf22977f024a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d10b4d11514d4162acc613c6c1beeaf7.png
[cab2599c86b7417c9be4b5822e0efb8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/015fb644caf7420e84f59dde2dc7374e.png
[2e8f794370bf455e8fb22cec0b139602.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/026f769721044466b9cd9cda0943f706.png
[35f836507d184122a62118e3371c4df1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e36851ba045e4c1e8319281b815abaec.png
[4fffcfb612614b5dae0c6f387a02c9bc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/86a269543f1c4c60b60761befff2142c.png
[b3495ae68643498ab271ffcc721180e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a92c42e08e1544af9564e5dcf045d22c.png
[ed40984da2584d84ad0538f1fbf1979d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/74e8676a4d7b40348f42e29505f267c7.png
[ec61a97a72b14652a7607ef5eac78b57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8ddf82a09fe54844ae46937d8b224669.png
[7bab2840cff446af9ff34c7e1f327b9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0c0811ef0be941a3889615ac78ad3eb1.png
[fa6260e2f7974929971321aa6285d1f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1107628de399446389d0978882c7c602.png
[971a77a44b2e4b9a8b440cb91f6a9c2a.png]: https://img-blog.csdnimg.cn/direct/971a77a44b2e4b9a8b440cb91f6a9c2a.png
[7676ce63ec0144cb9c22cf5e6cf613da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9c6538d50a924d0d8141312ac24a0eb9.png
[Vue3_pinia_-CSDN]: https://blog.csdn.net/LHY537200/article/details/137370471
[Vue3_pinia_-CSDN 1]: https://blog.csdn.net/LHY537200/article/details/137403217
[af5998b386204a64ab2549109bb08db0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3d33a8f585944af6b05b651d6d6a85bc.png