备案控制台
开发者社区 开发与运维 文章 正文

【前端--Vue】组件之间的多种通信方式，一文彻底搞懂组件通信！

2024-05-30 10
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【前端--Vue】组件之间的多种通信方式，一文彻底搞懂组件通信！

本篇将重点讲解vue中的多种组件通信方式，包括【父传子】【子传父】【兄弟组件通信】【依赖注入】等等，并提供具体案例来让小伙伴们加深理解、彻底掌握！喜欢的小伙伴们点赞收藏，持续关注哦~💕


💟 上一篇文章 史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册

📝 系列专栏 vue从基础到起飞

一、组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

  • 组件的数据是独立的，无法直接访问其他组件的数据。
  • 想使用其他组件的数据，就需要组件通信

2.组件关系分类

  1. 父子关系
  2. 非父子关系

3.通信解决方案

4.父子通信流程

  1. 父组件通过 props 将数据传递给子组件
  2. 子组件利用 $emit 通知父组件修改更新

5.父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="myTitle"></Son>
  </div>
</template>
 
<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '前端菜鸟的自我修养',
    }
  },
  components: {
    Son,
  },
}
</script>
 
<style>
</style>

子组件Son.vue

<template>
  <div class="son" style="border:3px solid #000;margin:10px">
    <!-- 3.直接使用props的值 -->
    我是Son组件 {{title}}
  </div>
</template>
 
<script>
export default {
  name: 'Son-Child',
  // 2.通过props来接受
  props:['title']
}
</script>
 
<style>
 
</style>

父向子传值步骤

  1. 给子组件以添加属性的方式传值
  2. 子组件内部通过props接收
  3. 模板中直接使用 props接收的值

6.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子组件Son.vue

<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是Son组件 {{ title }}
    <button @click="changeFn">修改title</button>
  </div>
</template>
 
<script>
export default {
  name: 'Son-Child',
  props: ['title'],
  methods: {
    changeFn() {
      // 通过this.$emit() 向父组件发送通知
      this.$emit('changTitle','前端菜鸟的自我修养')
    },
  },
}
</script>
 
<style>
</style>

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 2.父组件对子组件的消息进行监听 -->
    <Son :title="myTitle" @changTitle="handleChange"></Son>
  </div>
</template>
 
<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端',
    }
  },
  components: {
    Son,
  },
  methods: {
    // 3.提供处理函数，提供逻辑
    handleChange(newTitle) {
      this.myTitle = newTitle
    },
  },
}
</script>
 
<style>
</style>

子向父传值步骤

  1. $emit触发事件，给父组件发送消息通知
  2. 父组件监听$emit触发的事件
  3. 提供处理函数，在函数的性参中获取传过来的参数

二、详解props

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

  1. 可以 传递 任意数量 的prop
  2. 可以 传递 任意类型 的prop

4.代码演示

父组件App.vue

<template>
  <div class="app">
    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
    ></UserInfo>
  </div>
</template>
 
<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>
 
<style>
</style>

子组件UserInfo.vue

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年龄：{{age}}</div>
    <div>是否单身：{{isSingle}}</div>
    <div>座驾：{{car.brand}}</div>
    <div>兴趣爱好：{{hobby.join('、')}}</div>
  </div>
</template>
 
<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>
 
<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

三、props校验

1.思考

组件的props可以乱传吗？

2.作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

3.语法

  • 类型校验
  • 非空校验
  • 默认值
  • 自定义校验

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>
 
<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 50,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>
 
<style>
</style>

子组件 BaseProgress.vue（写了一个简单的进度条组件）

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    w: Number,
  },
}
</script>
 
<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

实现了进度条显示50%的进度，效果图如下：

四、props校验完整写法

1.语法

props: {

 校验的属性名: {

   type: 类型,  // Number String Boolean ......

   required: true, // 是否必填

   default: 默认值, // 默认值

   validator (value) {

     // 自定义校验逻辑

     return 是否通过校验

   }

 }

},

2.代码实例

 

 </div><div>  export default {</div><div>    // 完整写法（类型、默认值、非空、自定义校验）</div><div>    props: {</div><div>      w: {</div><div>        type: Number,</div><div>        required: true,</div><div>        default: 0,</div><div>        validator(val) {</div><div>          // console.log(val)</div><div>          if (val >= 100 || val <= 0) {</div><div>            console.error('传入的范围必须是0-100之间')</div><div>            return false</div><div>          } else {</div><div>            return true</div><div>          }</div><div>        },</div><div>      },</div><div>    },</div><div>  }</div><div>  

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认值。如果是复杂类型的值，则需要以函数的形式return一个默认值

五、props & data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

  • data 的数据是自己的 → 随便改
  • prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseCount :count="count" @changeCount="handleChange"></BaseCount>
  </div>
</template>
 
<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    handleChange(newVal){
      // console.log(newVal);
      this.count = newVal
    }
  }
}
</script>
 
<style>
 
</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>
 
<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
    },
  },
  methods: {
    handleSub() {
      this.$emit('changeCount', this.count - 1)
    },
    handleAdd() {
      this.$emit('changeCount', this.count + 1)
    },
  },
}
</script>
 
<style>
.base-count {
  margin: 20px;
}
</style>

5.口诀

谁的数据谁负责

六、非父子通信 -- event bus 事件总线

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

  1. 创建一个都能访问的事件总线 （空Vue实例）

 

 import Vue from 'vue'

 const Bus = new Vue()

 export default Bus

  1. A组件（接受方），监听Bus的 $on事件

 

 created () {

   Bus.$on('sendMsg', (msg) => {

     this.msg = msg

   })

 }

  1. B组件（发送方），触发Bus的$emit事件

 

 Bus.$emit('sendMsg', '这是一个消息')

3.代码示例

新建EventBus.js，实例化一个新组件实例并向外暴露，作为兄弟组件传值的媒介

 

 import Vue from 'vue'

 const Bus  =  new Vue()

 export default Bus

BaseA.vue(接收方)

<template>
  <div class="base-a">
    我是A组件（接受方）
    <p>{{msg}}</p>  
  </div>
</template>
 
<script>
import Bus from '../utils/EventBus'
export default {
  data() {
    return {
      msg: '',
    }
  },
  created() {
    Bus.$on('sendMsg', (msg) => {
      // console.log(msg)
      this.msg = msg
    })
  },
}
</script>
 
<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseB.vue(发送方)

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="sendMsgFn">发送消息</button>
  </div>
</template>
 
<script>
import Bus from '../utils/EventBus'
export default {
  methods: {
    sendMsgFn() {
      Bus.$emit('sendMsg', '今天天气不错，适合旅游')
    },
  },
}
</script>
 
<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB>
  </div>
</template>
 
<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
export default {
  components:{
    BaseA,
    BaseB,
  }
}
</script>
 
<style>
 
</style>

七、非父子通信 -- provide&inject

1.作用

跨层级共享数据，不只是父子之间，也可以是祖父与孙子之间，曾祖父与重孙之间......

2.场景

3.语法

  1. 父组件 provide提供数据

 

 export default {

   provide () {

     return {

        // 普通类型【非响应式】

        color: this.color,

        // 复杂类型【响应式】

        userInfo: this.userInfo,

     }

   }

 }

2.子/孙组件 inject获取数据

 

 export default {

   inject: ['color','userInfo'],

   created () {

     console.log(this.color, this.userInfo)

   }

 }

4.完整实例

爷组件

<template>
  <div>
    <button @click="changeMsg">祖组件触发</button>
    <h1>祖组件</h1>
    <parent></parent>
  </div>
</template>
 
<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      developer:'布兰登·艾奇',
      year:1995,
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, // 方式1.传入一个可监听的对象
      developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值
      year: this.year, // 方式3.直接传值
      app: this, // 方式4. 提供祖先组件的实例 缺点：实例上挂载很多没有必要的东西 比如：props，methods。
    }
  },
  components: {
    parent,
  },
  methods:{
    changeMsg(){
      this.obj.name = 'Vue';
      this.developer = '尤雨溪';
      this.year = 2014;
      this.update = '2021年6月7日';
    },
  },
}
</script>

父组件

<template>
  <div class="wrap">
    <h4>子组件（只做中转）</h4>
    <child></child>
  </div>
</template>
 
<script>
import child from './child.vue';
export default {
  components:{
    child,
  },
}
</script>

孙组件

<template>
  <div>
    <h5>孙组件</h5>
    <span>名称：{{obj.name}}</span> |
    <span>作者：{{developer}}</span> |
    <span>诞生于：{{year}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
 
<script>
export default {
  computed:{
    developer(){
      return this.developerFn()
    }
  },
  inject:['obj','developerFn','year','app'],
}
</script>

实现效果如下图

对比一下前后差异：无论点击多少次，孙组件中的诞生于 year 字段永远都是1995 并不会发生变化，通过 方式1、方式2、方式4传值是可以响应的。

正如官网所提到的：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

另一种情况：在孙组件中修改祖组件传递过来的值（方式1、方式4），发现对应的祖组件中的值也发生了变化：

爷组件

<template>
  <div>
    <h1>祖组件</h1>
    <span>名称：{{obj.name}}</span> |
    <span>最后更新于：{{update}}</span>
    <parent></parent>
  </div>
</template>
 
<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, 
      app: this,
    }
  },
  components: {
    parent,
  },
}
</script>

父组件不变

孙组件

<template>
  <div>
    <button @click="changeMsg">孙组件触发</button>
    <h3>孙组件</h3>
    <span>名称：{{obj.name}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
 
<script>
export default {
  inject:['obj','app'],
  methods: {
    changeMsg(){
      this.obj.name = 'React';
      this.app.update = '2020年10月';
    }
  },
}
</script>

5. 总结

慎用 provide / inject

既然 provide/inject 如此好用，那么，为什么 Vue 官方还要推荐我们使用 Vuex，而不是用原生的 API 呢？

答： 前面提到过，Vuex 和 provide/inject 最大的区别：Vuex 中的全局状态的每次修改是可以追踪回溯的，而 provide/inject 中变量的修改是无法控制的。换句话说，不知道是哪个组件修改了这个全局状态。

Vue 的设计理念借鉴了 React 中的单向数据流原则（虽然有 sync 这种破坏单向数据流的家伙），而 provide/inject 明显破坏了单向数据流原则。试想，如果有多个后代组件同时依赖于一个祖先组件提供的状态，那么只要有一个组件修改了该状态，那么所有组件都会受到影响。这一方面增加了耦合度，另一方面，使得数据变化不可控。如果在多人协作开发中，这将成为一个噩梦。

在这里，总结了使用 provide/inject 做全局状态管理的原则：

多人协作时，做好作用域隔离；

尽量使用一次性数据作为全局状态

一层嵌套的父子组件可以使用props来传值，props本身就是有相应性的。

根据自身代码选择合适的传值方式，并不一定非要用provide/inject的传值。

文章标签：
JavaScript
前端开发
API
开发者
关键词：
前端vue
前端组件
前端vue通信
前端vue组件通信
前端组件通信
前端菜鸟的自我修养
目录
相关文章
_BugMan
|
5天前
|
JavaScript 前端开发 Java
【Vue实战项目】学完前端基础后，可能你还需要掌握这些才能接手开发项目
【Vue实战项目】学完前端基础后，可能你还需要掌握这些才能接手开发项目
_BugMan
14 0
她说她一如既往的爱我
|
12天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
她说她一如既往的爱我
19 2
蓝易云
|
14天前
|
JavaScript 前端开发 应用服务中间件
蓝易云 - dockerfile部署前端vue打包的dist文件实战
这样，你的Vue应用就会在Docker容器中运行，你可以通过访问[http://localhost:8080](http://localhost:8080/)来查看你的应用。
蓝易云
107 0
八音盒coding
|
17天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
20 2
前端技术栈
|
1月前
|
Web App开发 缓存 前端开发
前端性能优化的整理笔记（一）
前端性能优化的整理笔记（一）
前端技术栈
112 0
艾尼麻麻
|
14天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
艾尼麻麻
20 2
老板这功能得加钱
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效，2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效，2024年最新面试题+笔记+项目实战
老板这功能得加钱
28 0
yma16
|
1月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
yma16
48 1
时雨h
|
1月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记（十二）
css设计文本样式 前端开发入门笔记（十二）
时雨h
13 0
时雨h
|
1月前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记（十一）
CSS中的非布局样式+CSS布局 前端开发入门笔记（十一）
时雨h
46 0

热门文章

最新文章

  • 1
    Redis多级缓存指南：从前端到后端全方位优化！
  • 2
    Node.js在前端的妙用：打造更出色的Web体验
  • 3
    前端技术栈：构建现代Web应用的基石与实践
  • 4
    【好用】推荐10套后端管理系统前端模板
  • 5
    前端安全：Vue应用中防范XSS和CSRF攻击
  • 6
    【Web 前端】undefined 和 null 区别？
  • 7
    局域网管理软件的前端设计与实现：HTML/CSS在网络拓扑展示中的应用
  • 8
    【Web 前端】相对定位，绝对定位，固定定位的区别？
  • 9
    springboot集成springdoc-openapi(模拟前端请求)
  • 10
    【Flutter前端技术开发专栏】Flutter中的热重载与热更新机制
  • 1
    现代前端开发中的响应式设计与跨平台兼容性
    49
  • 2
    前端性能优化：掌握解决方案
    20
  • 3
    数据驱动的前端设计与开发实践
    38
  • 4
    袁志佳：前端全栈工程师精英班
    46
  • 5
    前端Webpack5高级进阶课程
    15
  • 6
    Web前端全栈HTML5通向大神之路
    64
  • 7
    云效常见问题之编译前端的时候报了个错说证书过期如何解决
    27
  • 8
    mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
    85
  • 9
    从前端到后端：构建全栈开发的技术生态
    32
  • 10
    AJAX 前端开发利器：实现网页动态更新的核心技术
    75

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 基于函数计算快速搭建Zblog等传统应用框架
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考