Vue2向Vue3过度核心技术组件通信

目录

    • 1 组件基础知识scoped解决样式冲突
      • 1.1 默认情况：
      • 1.2 代码演示
      • 1.3 scoped原理
      • 1.4 总结
    • 2 组件基础知识data必须是一个函数
      • 2.1 data为什么要写成函数
      • 2.2 代码演示
      • 2.3 总结
    • 3 组件通信
      • 3.1 什么是组件通信？
      • 3.2 组件之间如何通信
      • 3.3 组件关系分类
      • 3.4 通信解决方案
      • 3.5 父子通信流程
      • 3.6 父向子通信代码示例
      • 3.7 子向父通信代码示例
      • 3.8 总结
    • 4 什么是props
      • 4.1.Props 定义
      • 4.2.Props 作用
      • 4.3.特点
      • 4.4.代码演示
    • 5 props校验
      • 5.1.思考
      • 5.2.作用
      • 5.3.语法
      • 5.4.代码演示
    • 6 props校验完整写法
      • 6.1.语法
      • 6.2.代码实例
      • 6.3.注意
    • 7 props&data、单向数据流
      • 7.1.共同点
      • 7.2.区别
      • 7.3.单向数据流：
      • 7.4.代码演示
      • 7.5.口诀
    • 8 综合案例-组件拆分
      • 8.1.需求说明
      • 8.2.拆分基础组件
    • 9 综合案例-列表渲染
    • 10 综合案例-添加功能
    • 11 综合案例-删除功能
    • 12 综合案例-底部功能及持久化存储
    • 13 非父子通信-event bus 事件总线
      • 13.1.作用
      • 13.2.步骤
      • 13.3.代码示例
      • 13.4.总结
    • 14 非父子通信-provide&inject
      • 14.1.作用
      • 14.2.场景
      • 14.3.语法
      • 14.4.注意

1 组件基础知识scoped解决样式冲突

在这里插入图片描述

1.1 默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

  1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

  2. 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

1.2 代码演示

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script>
<style scoped>
</style>

BaseTwo.vue

<template><div class="base-one">BaseTwo</div>
</template><script>
export default {}
</script><style scoped>
</style>

App.vue

<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

1.3 scoped原理

  1. 当前组件内标签都被添加data-v-hash值 的属性
  2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

在这里插入图片描述

1.4 总结

  1. style的默认样式是作用到哪里的？
  2. scoped的作用是什么？
  3. style中推不推荐加scoped？

2 组件基础知识data必须是一个函数

2.1 data为什么要写成函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

在这里插入图片描述

2.2 代码演示

BaseCount.vue

<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {data: function () {return {count: 100,}},
}
</script><style>
.base-count {margin: 20px;
}
</style>

App.vue

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

2.3 总结

data写成函数的目的是什么？

3 组件通信

3.1 什么是组件通信？

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

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

3.2 组件之间如何通信

在这里插入图片描述

思考：

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

3.3 组件关系分类

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

在这里插入图片描述

3.4 通信解决方案

在这里插入图片描述

3.5 父子通信流程

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

在这里插入图片描述

3.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接收的值

3.7 子向父通信代码示例

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

在这里插入图片描述

子向父传值步骤

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

3.8 总结

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

4 什么是props

4.1.Props 定义

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

4.2.Props 作用

向子组件传递数据

4.3.特点

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

在这里插入图片描述

4.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>

5 props校验

5.1.思考

组件的props可以乱传吗

5.2.作用

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

5.3.语法

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

在这里插入图片描述

5.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>

6 props校验完整写法

6.1.语法

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

6.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>

6.3.注意

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

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

7 props&data、单向数据流

7.1.共同点

都可以给组件提供数据

7.2.区别

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

7.3.单向数据流：

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

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

在这里插入图片描述

7.5.口诀

谁的数据谁负责

8 综合案例-组件拆分

8.1.需求说明

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

8.2.拆分基础组件

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

在这里插入图片描述

9 综合案例-列表渲染

思路分析：

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

10 综合案例-添加功能

思路分析：

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

11 综合案例-删除功能

思路分析：

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

12 综合案例-底部功能及持久化存储

思路分析：

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

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

13.1.作用

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

13.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', '这是一个消息')

在这里插入图片描述

13.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>

13.4.总结

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

2.什么是事件总线

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

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

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

14 非父子通信-provide&inject

14.1.作用

跨层级共享数据

14.2.场景

在这里插入图片描述

14.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)}
}

14.4.注意

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

为什么使用Nacos而不是Eureka（Nacos和Eureka的区别）

为什么使用Nacos而不是Eureka（Nacos和Eureka的区别）

文章目录 前言一、Eureka是什么&#xff1f;二、Nacos是什么&#xff1f;三、Nacos和Eureka的区别3.1 支持的CAP3.2连接方式3.3 服务异常剔除3.4 操作实例方式 总结 前言 为什么如今微服务注册中心用Nacos相对比用Eureka的多了&#xff1f;本文章将介绍他们之间的区别和优缺点…
阅读更多...
【element-ui】el-dialog改变宽度

【element-ui】el-dialog改变宽度

dialog默认宽度为父元素的50%&#xff0c;这就导致在移动端会非常的窄&#xff0c;如图1&#xff0c;需要限定宽度。 解决方法&#xff1a;添加custom-class属性&#xff0c;然后在style中编写样式&#xff0c;注意&#xff0c;如果有scoped限定&#xff0c;需要加::v-deep &l…
阅读更多...
浅谈Spark的RDD、部署模式

浅谈Spark的RDD、部署模式

一、RDD Spark RDD&#xff08;弹性分布式数据集&#xff09;&#xff0c;弹性是指Spark可以通过重新计算来自动重建丢失的分区。 从本质上讲&#xff0c;RDD 是数据元素的不可变分布式集合&#xff0c;跨集群中的节点进行分区&#xff0c;可以与提供转换和操作的低级 API 并行…
阅读更多...
到目前为止，所有的关于安卓14的详细介绍

到目前为止，所有的关于安卓14的详细介绍

安卓14现在可能已经不远了，谷歌已经进行了五次测试，通常10月份的发布窗口时间很快就会到来。但除了在谷歌I/O 2023上进行简短讨论外，谷歌对正在发生的变化相对沉默。 可以肯定地说，Android 14不会是操作系统有史以来最大的一系列变化，但有很多改进和变化可以让Android保持…
阅读更多...
【计算机网络】HTTPs 传输流程

【计算机网络】HTTPs 传输流程

HTTPS和HTTP的区别 1、HTTP协议传输的数据都是未加密的&#xff0c;是明文的&#xff0c;使用HTTP协议传输隐私信息非常不安 HTTPS协议是由SSLHTTP协议构建的可进行加密传输、身份认证的网络协议&#xff0c;要比http协议安全。 2、HTTPS协议需要到CA申请证书&#xff0c;一般…
阅读更多...
qt 的基础学习计划列表

qt 的基础学习计划列表

1 第一天 &#xff08;qt 的基础&#xff09; 什么是qt hello程序&#xff0c;空窗口 添加按钮&#xff08;对象树、父子关系&#xff09; 按钮的功能&#xff08;信号和槽&#xff09; 信号和槽的拓展2 第二天 各个控件 最简单的记事本界面&#xff08;菜单栏、状态栏、工具…
阅读更多...
apache的ab工具测试网页优化效果速度以及服务器承载

apache的ab工具测试网页优化效果速度以及服务器承载

今天为大家介绍一款apache自带的一种的测试网页优化效果速度以及服务器承载的工具——ab.exe。 大家在工作中或者开发中可以使用apache的ab工具来测试自己的网站并发量大小&#xff0c;和某个页面的访问时间。 一、基本用法 如果你是用的是apache的话&#xff0c;那么只要进…
阅读更多...
科技资讯|三星再申请智能戒指商标，智能穿戴进入更小型化发展

科技资讯|三星再申请智能戒指商标，智能穿戴进入更小型化发展

三星正在积极扩展可穿戴设备生态&#xff0c;近日向英国知识产权局提交了名为“Samsung Curio”的新商标&#xff0c;其分类为“Class 9”&#xff0c;可能会用于未来的智能戒指。 智能戒指&#xff1a; 可穿戴计算机本质上的智能手环、智能项链、智能眼镜和智能戒指&#xff1…
阅读更多...
【计算机网络】日志与守护进程

【计算机网络】日志与守护进程

文章目录 日志日志的创建logmessage 函数日志左边部分实现日志右边部分实现 完整代码log.hpp(整体实现)err.hpp (错误信息枚举&#xff09; 守护进程PGID SID TTY 的介绍shell中控制进程组的方式结论 为什么要有守护进程存在&#xff1f;守护进程的创建使用守护进程的条件守护进…
阅读更多...
华为各型号交换机开启SNMP v3

华为各型号交换机开启SNMP v3

设备型号&#xff1a;华为S5720S-28P-LI-AC 设备软件版本&#xff1a;V200R011C10SPC600 调试命令&#xff1a; snmp-agent snmp-agent sys-info version v3 snmp-agent group v3 GroupName privacy //{GroupName}是设置一个SNMP的组名&#xff0c;我设置是SNMPGroup snm…
阅读更多...
算法 for GAMES

算法 for GAMES

栈 #include <iostream> #include <stack>int main() {std::stack<int> intStack;// 压入元素到堆栈intStack.push(5);intStack.push(10);intStack.push(15);// 查看堆栈顶部元素std::cout << "Top element: " << intStack.top() <…
阅读更多...
免费的png打包plist工具CppTextu，一款把若干资源图片拼接为一张大图的免费工具

免费的png打包plist工具CppTextu，一款把若干资源图片拼接为一张大图的免费工具

经常做游戏打包贴图的都知道&#xff0c;要把图片打包为一张或多张大图&#xff0c;要使用打包工具TexturePacker。 TexturePacker官方版可以直接导入PSD、SWF、PNG、BMP等常见的图片格式&#xff0c;主要用于网页、游戏和动画的制作&#xff0c;它可以将多个小图片汇聚成一个…
阅读更多...
kafka--技术文档-基本概念-《快速了解kafka》

kafka--技术文档-基本概念-《快速了解kafka》

学习一种新的消息中间键&#xff0c;卡夫卡&#xff01;&#xff01;&#xff01; 官网网址 Apache Kafka 基本概念 Kafka是一种开源的分布式流处理平台&#xff0c;由Apache软件基金会开发&#xff0c;用Scala和Java编写。它是一个高吞吐量的分布式发布订阅消息系统&#xf…
阅读更多...
软考高级系统架构设计师系列论文九十：论分布式数据库的设计与实现

软考高级系统架构设计师系列论文九十：论分布式数据库的设计与实现

软考高级系统架构设计师系列论文九十：论分布式数据库的设计与实现 一、分布式数据库相关知识点二、摘要三、正文四、总结一、分布式数据库相关知识点 软考高级系统架构设计师系列之：分布式存储技术
阅读更多...
java中用SXSSFWorkbook把多个字段的list数据和单个实体dto导出到excel如何导出到多个sheet页详细实例?

java中用SXSSFWorkbook把多个字段的list数据和单个实体dto导出到excel如何导出到多个sheet页详细实例?

要使用SXSSFWorkbook将多个字段的List数据和单个实体DTO导出到多个Sheet页&#xff0c;你可以按照以下步骤进行操作&#xff1a; 创建一个SXSSFWorkbook对象作为工作簿。针对每个字段的List数据&#xff0c;创建一个新的Sheet页&#xff0c;并将数据写入该Sheet页。创建一个新…
阅读更多...
QCC_BES 音频重采样算法实现

QCC_BES 音频重采样算法实现

+V hezkz17进数字音频系统研究开发交流答疑群(课题组) 这段代码是一个用于将音频数据进行立体声重采样的函数。以下是对代码的解读： 函数接受以下参数： pcm_buf：16位有符号整型的音频缓冲区，存储了输入的音频数据。pcm_len：音频缓冲区的长度。mic1：16位有符号整型的音频…
阅读更多...
CSS内边距和外边距属性

CSS内边距和外边距属性

外边距属性用margin&#xff1b;padding属性叫填充&#xff0c;或者也叫内边距&#xff1b; margin:标签与标签的距离&#xff0c;到包围它的元素的边框的距离&#xff1b; padding&#xff1a;内边距&#xff0c;用于控制内容与边框之间的距离&#xff1b; CSS padding&…
阅读更多...
C 语言编程规范 -- 华为

C 语言编程规范 -- 华为

1. 代码总体原则 1.1 清晰第一&#xff0c;清晰性是易于维护&#xff0c;易于重构的程序必须具备的特征 代码首先是给人读的&#xff0c;好的代码应当可以像文章一样发生朗诵出来&#xff0c;“程序必须为阅读它的人而编写&#xff0c;只是顺便用于机器执行” – Harold Abel…
阅读更多...
视频集中存储/云存储平台EasyCVR国标GB28181协议接入的报文交互数据包分析

视频集中存储/云存储平台EasyCVR国标GB28181协议接入的报文交互数据包分析

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频汇聚融合管理…
阅读更多...
ChatGPT⼊门到精通(1):ChatGPT 是什么

ChatGPT⼊门到精通(1):ChatGPT 是什么

⼀、直观感受 1、公司 OpenAI&#xff08;美国&#xff09; 2、官⽅⽹站 3、登录ChatGPT ![在这里插入图片描述](https://img-blog.csdnimg.cn/26901096553a4ba0a5c88c49b2601e6a.png 填⼊帐号、密码&#xff0c;点击登录。登录成功&#xff0c;如下 3、和ChatGPT对话 开始…
阅读更多...
最新文章

Copyright @ 2022~2023