【Vue2+3入门到实战】（10）Vue基础之一文掌握 组件通信 详细示例（组件通信语法、父传子 、 子传父、非父子通信）

这里写自定义目录标题

    • 一、学习目标
      • 1.组件通信
      • 2.综合案例：小黑记事本（组件版）
    • 二、组件通信
      • 1.什么是组件通信？
      • 2.组件之间如何通信
      • 3.组件关系分类
      • 4.通信解决方案
      • 5.父子通信流程
      • 6.父向子通信代码示例
      • 7.子向父通信代码示例
      • 8.总结
    • 三、什么是props
      • 1.Props 定义
      • 2.Props 作用
      • 3.特点
      • 4.代码演示
    • 四、props校验
      • 1.思考
      • 2.作用
      • 3.语法
      • 4.代码演示
    • 五、props校验完整写法
      • 1.语法
      • 2.代码实例
      • 3.注意
    • 六、props&data、单向数据流
      • 1.共同点
      • 2.区别
      • 3.单向数据流：
      • 4.代码演示
      • 5.口诀
    • 七、综合案例-组件拆分
      • 1.需求说明
      • 2.拆分基础组件
    • 八、综合案例-列表渲染
    • 九、综合案例-添加功能
    • 十、综合案例-删除功能
    • 十一、综合案例-底部功能及持久化存储
    • 十二、非父子通信-event bus 事件总线
      • 1.作用
      • 2.步骤
      • 3.代码示例
      • 4.总结
    • 十三、非父子通信-provide&inject
      • 1.作用
      • 2.场景
      • 3.语法
      • 4.注意

在这里插入图片描述

一、学习目标

1.组件通信

  1. 组件通信语法
  2. 父传子
  3. 子传父
  4. 非父子通信（扩展）

2.综合案例：小黑记事本（组件版）

  1. 拆分组件
  2. 列表渲染
  3. 数据添加
  4. 数据删除
  5. 列表统计
  6. 清空
  7. 持久化

二、组件通信

1.什么是组件通信？

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

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

2.组件之间如何通信

在这里插入图片描述

思考：

  1. 组件之间有哪些关系？
  2. 对应的组件通信方案有哪几类？

3.组件关系分类

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

在这里插入图片描述

4.通信解决方案

在这里插入图片描述

5.父子通信流程

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

在这里插入图片描述

6.父向子通信代码示例

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

父组件App.vue

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件 
    <Son></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">
    我是Son组件
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
}
</script>

<style>

</style>

在这里插入图片描述

父向子传值步骤

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

7.子向父通信代码示例

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

在这里插入图片描述

子向父传值步骤

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

8.总结

  1. 组件关系分类有哪两种
  2. 父子组件通信的流程是什么？
    1. 父向子
    2. 子向父

三、什么是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>姓名：</div>
    <div>年龄：</div>
    <div>是否单身：</div>
    <div>座驾：</div>
    <div>兴趣爱好：</div>
  </div>
</template>

<script>
export default {
  
}
</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: 30,
    }
  },
  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'],
}
</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>

五、props校验完整写法

1.语法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

2.代码实例

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

3.注意

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

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

六、props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

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

3.单向数据流：

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

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
  },
}
</script>

<style>

</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
   data () {
     return {
       count: 100,
     }
   },
  // 2.外部传过来的数据 不能随便修改
  //props: {
  //  count: {
  //    type: Number,
  //  }, 
  //}
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

在这里插入图片描述

5.口诀

谁的数据谁负责

七、综合案例-组件拆分

1.需求说明

  • 拆分基础组件
  • 渲染待办任务
  • 添加任务
  • 删除任务
  • 底部合计 和 清空功能
  • 持久化存储

2.拆分基础组件

咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)

在这里插入图片描述

八、综合案例-列表渲染

思路分析：

  1. 提供数据：提供在公共的父组件 App.vue
  2. 通过父传子，将数据传递给TodoMain
  3. 利用v-for进行渲染

九、综合案例-添加功能

思路分析：

  1. 收集表单数据 v-model
  2. 监听时间 （回车+点击 都要进行添加）
  3. 子传父，将任务名称传递给父组件App.vue
  4. 父组件接受到数据后 进行添加 unshift(自己的数据自己负责)

十、综合案例-删除功能

思路分析：

  1. 监听时间（监听删除的点击）携带id
  2. 子传父，将删除的id传递给父组件App.vue
  3. 进行删除 filter (自己的数据自己负责)

十一、综合案例-底部功能及持久化存储

思路分析：

  1. 底部合计：父组件传递list到底部组件 —>展示合计
  2. 清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
  3. 持久化存储：watch监听数据变化，持久化到本地

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

1.作用

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

2.步骤

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

    import Vue from 'vue'
const Bus = new Vue()
export default Bus

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

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

  3. 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: '',
    }
  },
}
</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>发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
}
</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>

4.总结

1.非父子组件传值借助什么？

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

5.一个组件发送数据，可不可以被多个组件接收

十三、非父子通信-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.注意

  • provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
  • 子/孙组件通过inject获取的数据，不能在自身组件内修改

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/276891.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

易趋产品升级（EasyTrack 11_V1.3） | 集成飞书、WPS、个性化设置，增强团队协作和用户体验

易趋产品升级（EasyTrack 11_V1.3） | 集成飞书、WPS、个性化设置，增强团队协作和用户体验

企业在项目管理过程中&#xff0c;经常会遇到项目信息同步不及时、沟通障碍以及管理软件使用不便捷等难题&#xff0c;导致团队协作效率低下。这种情况下&#xff0c;如果使用了多个办公软件&#xff08;如&#xff1a;钉钉、企业微信、项目管理软件等&#xff09;&#xff0c;…
阅读更多...
AIGC盛行，带你轻松调用开发

AIGC盛行，带你轻松调用开发

文章目录 前言一、&#x1f4d6;AIGC简介二、&#x1f4e3;开通体验开通模型获取API-KEY 三、&#x1f4dd;基于java实现调用1.设置API-KEY2.体验大语言模型多轮对话演示补充流式输出 3.体验通义千问VL使用官方提供照片本地文件多轮对话流式输出 总结 前言 本篇文章基于java和…
阅读更多...
IPv4归属地信息查询方法与应用

IPv4归属地信息查询方法与应用

IPv4地址归属地信息查询是网络管理和安全领域的关键工具。本文将介绍IPv4地址的概念&#xff0c;探讨IPv4归属地信息的重要性&#xff0c;并详细介绍几种查询IPv4归属地信息的方法以及其应用场景。 第一部分&#xff1a;IPv4地址简介 1.1 什么是IPv4地址 IPv4&#xff08;In…
阅读更多...
CGAL的形状规则化

CGAL的形状规则化

规则化之前&#xff08;红色&#xff09;和之后&#xff08;绿色&#xff09;的闭合轮廓。 1、介绍 这个 CGAL包能够规范2D中的一组线段和开闭轮廓以及3D中的一组平面&#xff0c;以便所有输入对象根据用户指定的条件进行旋转和对齐。此外&#xff0c;我们提供了一个全局规范框…
阅读更多...
旧衣回收小程序搭建，稳占回收市场

旧衣回收小程序搭建，稳占回收市场

近几年我国大众的消费水平不断提升&#xff0c;闲置物品也相应增加了不少&#xff0c;尤其是闲置衣服&#xff0c;为了减少资源浪费&#xff0c;旧衣服回收回收行业受到了大众的关注。 目前我国旧衣服回收行业的市场规模达到了300多亿元&#xff0c;旧衣回收行业的商业价值非常…
阅读更多...
跨模态检索论文阅读：Plug-and-Play Regulators for Image-Text Matching用于图像文本匹配的即插即用调节器

跨模态检索论文阅读：Plug-and-Play Regulators for Image-Text Matching用于图像文本匹配的即插即用调节器

Plug-and-Play Regulators for Image-Text Matching用于图像文本匹配的即插即用调节器 利用细粒度的对应关系和视觉语义比对在图像-文本匹配中显示出巨大的潜力。通常&#xff0c;最近的方法首先使用跨模态注意力单元来捕捉潜在的区域-单词交互&#xff0c;然后整合所有比对以获…
阅读更多...
椭圆中点算法

椭圆中点算法

原理 椭圆的扫描转换与圆的扫描转换有相似之处&#xff0c;但也有不同&#xff0c;主要区别是椭圆弧上存在改变主位移方向的临界点。瞬时针绘制四分椭圆弧的中点算法&#xff0c;根据对称性可以绘制完整的椭圆。 四分椭圆弧 中心在原点&#xff0c;长半轴为 a a a、短半轴为…
阅读更多...
diffusion model (十) anydoor技术小结

diffusion model (十) anydoor技术小结

paperAnyDoor: Zero-shot Object-level Image Customizationcodehttps://github.com/damo-vilab/AnyDoorOrg香港大学&#xff0c;Alibaba Groupdate2023-07 1 Motivation 过去我们用dreambooth&#xff0c;LORA&#xff0c;textual inversion等方法做定制目标生成。但这个方法…
阅读更多...
liunx系统突然不能启动jar

liunx系统突然不能启动jar

启动命令 nohup java -jar /date/gd_ly/jar/mssda-platform-backend-0.0.1-SNAPSHOT.jar -Dspring.config.location/date/gd_ly/jar/application-dev.yml 报错信息 Error: A JNI error has occurred, please check your installation and try again Exception in thread &q…
阅读更多...
2022年全球软件质量效能大会（QECon北京站2022）-核心PPT资料下载

2022年全球软件质量效能大会（QECon北京站2022）-核心PPT资料下载

一、峰会简介 当前&#xff0c;新一轮科技革命和产业变革正在重塑全球经济格局&#xff0c;以云计算为代表的新一代信息技术创新活跃&#xff0c;与实体经济深度融合&#xff0c;推动泛在连接、数据驱动、智能引领的数字经济新形式孕育而生。 新兴技术的出现给测试乃至整个软…
阅读更多...
CSS 纵向扩展动画

CSS 纵向扩展动画

上干货 <template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container&q…
阅读更多...
HCIA-Datacom题库（自己整理分类的）——OSPF协议判断

HCIA-Datacom题库（自己整理分类的）——OSPF协议判断

1.路由表中某条路由信息的Proto为OSPF则此路由的优先级一定为10。√ 2.如果网络管理员没有配置骨干区域,则路由器会自动创建骨干区域&#xff1f; 路由表中某条路由信息的Proto为OSPF&#xff0c;则此路由的优先级一定为10。 当两台OSPF路由器形成2-WAY邻居关系时&#xff0…
阅读更多...
Arduino串口发送接收和串口中断事件

Arduino串口发送接收和串口中断事件

目录 一、硬件介绍 1、控制器 2、TTL转USB串口 二、软件程序 1、单片机发送字符串 &#xff08;1&#xff09;每个串口对应的类名称介绍 &#xff08;2&#xff09;发送功能 &#xff08;3&#xff09;代码 &#xff08;4&#xff09;测试 2、单片机接收字符串 &…
阅读更多...
【 YOLOv5】目标检测 YOLOv5 开源代码项目调试与讲解实战（3）-训练yolov5模型（本地）

【 YOLOv5】目标检测 YOLOv5 开源代码项目调试与讲解实战（3）-训练yolov5模型（本地）

训练yolov5模型&#xff08;本地&#xff09; 训练文件 train.py训练如下图 一些参数的设置weights:对于weight参数&#xff0c;可以往Default参数中填入的参数有 cfg&#xff1a;&#xff08;缩写&#xff09;cfg参数可以选择的网络模型 data对于data hyp 超参数epochs 训练多…
阅读更多...
全新ui自动化测试框架教学——Cypress

全新ui自动化测试框架教学——Cypress

前言 在现阶段自动化测试领域大规模普及的是selenium及appium等常规自动化测试工具&#xff0c;但在其中会有遇到很多影响因素导致测试结果不理想和不准确的情况发生。在经过Darren洋对自动化测试工具调研后&#xff0c;发现了Cypress这一款针对端到端的自动化测试工具&#xf…
阅读更多...
【Python基础】字符串

【Python基础】字符串

文章目录 [toc]什么是字符串索引示例索引越界 切片语法示例 字符串方法find()方法rfind()方法count()方法replace()方法 个人主页&#xff1a;丷从心 系列专栏&#xff1a;Python基础 什么是字符串 如下定义的变量url存储的是字符串类型的值 url www.baidu.com print(url)u…
阅读更多...
【银行测试】金融银行-理财项目面试/分析总结（二）

【银行测试】金融银行-理财项目面试/分析总结（二）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行理财相关的项…
阅读更多...
在Adobe Acrobat上如何做PDF文档签名

在Adobe Acrobat上如何做PDF文档签名

Adobe Acrobat如何做PDF文档签名&#xff1f;PDF文档签名是指对PDF文档进行基于证书的数字签名&#xff0c;类似于传统的手写签名&#xff0c;可标识签名文档的人员。与手写签名不同&#xff0c;数字签名难以伪造&#xff0c;因为其包含签名者唯一的加密信息。为PDF文档进行基于…
阅读更多...
Starling-LM-7B与GPT-4：开源AI的新纪录

Starling-LM-7B与GPT-4：开源AI的新纪录

引言 在人工智能的前沿领域&#xff0c;Starling-LM-7B的出现标志着开源大型语言模型&#xff08;LLM&#xff09;的一大突破。与GPT-4的近距离竞争不仅展示了Starling-LM-7B的技术实力&#xff0c;也突显了开源社区在推动AI发展方面的重要作用。 模型特点 Starling-LM-7B&a…
阅读更多...
java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ 可定制化

java 企业工程管理系统软件源码+Spring Cloud + Spring Boot +二次开发+ 可定制化

工程项目管理软件是现代项目管理中不可或缺的工具&#xff0c;它能够帮助项目团队更高效地组织和协调工作。本文将介绍一款功能强大的工程项目管理软件&#xff0c;该软件采用先进的Vue、Uniapp、Layui等技术框架&#xff0c;涵盖了项目策划决策、规划设计、施工建设到竣工交付…
阅读更多...
最新文章

Copyright @ 2022~2023