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;一般…
阅读更多...
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;守护进程的创建使用守护进程的条件守护进…
阅读更多...
算法 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…
阅读更多...
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对话 开始…
阅读更多...
k8s之Pod及Probe 探针机制（健康检查机制）

k8s之Pod及Probe 探针机制（健康检查机制）

文章目录 1、Pod1.1、定义1.2、Pod的形式1.3、Pod的使用1.4、 Pod生命周期1.5、初始化容器1.6、临时容器1.6.1、定义1.6.2、使用临时容器的步骤 1.7、静态Pod1.8、创建带标签的pod1.9、容器生命周期回调1.10、容器镜像使用秘钥从私有仓库下载1.11、多容器协同工作 2、Probe 探针…
阅读更多...
GAN原理 代码解读

GAN原理 代码解读

模型架构 代码 数据准备 import os import time import matplotlib.pyplot as plt import numpy as np import torchvision.transforms as transforms from torch.utils.data import DataLoader from torchvision import datasets import torch.nn as nn import torch# 创建文…
阅读更多...
搭建 Qt6 开发环境

搭建 Qt6 开发环境

作者&#xff1a; 一去、二三里 个人微信号&#xff1a; iwaleon 微信公众号&#xff1a; 高效程序员 Qt 是一个跨平台的 C 应用程序开发框架&#xff0c;它提供了丰富的组件库和工具&#xff0c;使得开发人员可以在各种平台上轻松地开发 GUI 应用程序。 由于我们的教程 《细说…
阅读更多...
CnetSDK .NET OCR SDK Crack

CnetSDK .NET OCR SDK Crack

CnetSDK .NET OCR SDK Crack CnetSDK.NET OCR库SDK是一款高度准确的.NET OCR扫描仪软件&#xff0c;用于使用手写、文本和其他符号等图像进行字符识别。它是一款.NET OCR库软件&#xff0c;使用Tesseract OCR引擎技术&#xff0c;可将字符识别准确率提高99%。通过将此.NET OCR扫…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023