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

news2024/11/23 7:28:24

目录

    • 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.coloradmin.cn/o/929947.html

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

相关文章

leetcode 392. 判断子序列

leetcode 392. 判断子序列

2023.8.25 本题要判断子序列&#xff0c;可以使用动态规划来做&#xff0c;定义一个二维dp数组。 接下来就是常规的动态规划求解子序列的过程。 给出两种定义dp数组的方法。 二维bool型dp数组&#xff1a; class Solution { public:bool isSubsequence(string s, string t) …
阅读更多...
升级Go 版本到 1.19及以上，Goland： file.Close() 报错： Unresolved reference ‘Close‘

升级Go 版本到 1.19及以上，Goland： file.Close() 报错： Unresolved reference ‘Close‘

错误截图 解决方法 File -> Settings -> Go -> Build Tags & Vendoring -> Custom tags -> 添加值 “unix” 原因 Go 1.19 引入了unix构建标签。因此&#xff0c;需要添加unix到自定义标签。 参考 https://blog.csdn.net/weixin_43940592/article/det…
阅读更多...
VScode代码自动补全提示

VScode代码自动补全提示

VScode代码自动补全提示 打开设置 搜索 Suggest:Snippets Prevent Quick Suggestions &#xff0c;去掉勾选 CtrlShiftP打开setting.json文件&#xff0c;添加以下代码 "editor.suggest.snippetsPreventQuickSuggestions": false,"editor.quickSuggestions…
阅读更多...
macOS - DOSbox

macOS - DOSbox

文章目录 关于 DOSbox安装使用启动设置启动盘、查看文件 debug 关于 DOSbox 官网&#xff1a; https://www.dosbox.com/文档&#xff1a;https://www.dosbox.com/wiki/Basic_Setup_and_Installation_of_DosBox下载&#xff1a; https://www.dosbox.com/download.php https://s…
阅读更多...
Request对象和response对象

Request对象和response对象

一、概念 request对象和response对象是通过Servlet容器&#xff08;如Tomcat&#xff09;自动创建并传递给Servlet的。 Servlet容器负责接收客户端的请求&#xff0c;并将请求信息封装到request对象中&#xff0c;然后将request对象传 递给相应的Servlet进行处理。类似地&…
阅读更多...
改进YOLO系列：10.添加NAMAttention注意力机制

改进YOLO系列：10.添加NAMAttention注意力机制

添加NAMAttention注意力机制 1. NAMAttention注意力机制论文２. NAMAttention注意力机制原理３. NAMAttention注意力机制的配置３.１common.py配置３.２yolo.py配置３.３yaml文件配置1. NAMAttention注意力机制论文 论文题目：NAM: Normalization-based Attention Module 论文…
阅读更多...
软件设计师学习笔记4-寻址方式

软件设计师学习笔记4-寻址方式

目录 1.指令的基本概念 2.寻址方式 2.1寻址方式及其特点 2.2寻址方式图解 3.CISC和RISC 1.指令的基本概念 一条指令就是机器语言的一个语句&#xff0c;它是一组有意义的二进制代码&#xff0c;指令的基本格式为操作码字段地址码字段&#xff0c;其中操作码给出该指令的对…
阅读更多...
pgadmin4树节点增删查（二）

pgadmin4树节点增删查（二）

十九&#xff0c;表 &#xff08;一&#xff09;查询 请求参数&#xff1a; gid1 sid1 did13799 scid2200pg模板&#xff1a; SELECT rel.oid, rel.relname AS name, rel.reltablespace AS spcoid,rel.relacl AS relacl_str,(CASE WHEN length(spc.spcname::text) > 0 T…
阅读更多...
【LeetCode-中等题】238. 除自身以外数组的乘积

【LeetCode-中等题】238. 除自身以外数组的乘积

题目 题解一&#xff1a;暴力双指针—超时了 双指针暴力查找(需考虑begin end 和begin end i) 的情况 ----- 力扣示例超出时间限制 public int[] productExceptSelf(int[] nums) {int length nums.length;int begin 0;int end length -1;int i 0;int[] number new in…
阅读更多...
基于python+pyqt实现opencv银行卡身份证等识别

基于python+pyqt实现opencv银行卡身份证等识别

效果展示 识别结果 查看处理过程 历史记录 完整演示视频&#xff1a; 无法粘贴视频........ 完整代码链接 视频和代码都已上传百度网盘&#xff0c;放在主页置顶文章
阅读更多...
MATLAB图论合集（二）计算最小生成树

MATLAB图论合集（二）计算最小生成树

今天来介绍第二部分&#xff0c;图论中非常重要的知识点——最小生成树。作为数据结构的理论知识&#xff0c;Prim算法和克鲁斯卡尔算法的思想此处博主不详细介绍&#xff0c;建议在阅读本帖前熟练掌握。 对于无向带权图&#xff0c;在MATLAB中可以直接以邻接矩阵的方式创建出来…
阅读更多...
研磨设计模式day11观察者模式

研磨设计模式day11观察者模式

目录 场景 代码示例 定义 观察者模式的优缺点 本质 何时选用 简单变型-区别对待观察者 场景 我是一家报社&#xff0c;每当我发布一个新的报纸时&#xff0c;所有订阅我家报社的读者都可以接收到 代码示例 报纸对象 package day11观察者模式;import java.util.Observ…
阅读更多...
stm32之DS18B20

stm32之DS18B20

DS18B20与stm32之间也是通过单总线进行数据的传输的。单总线协议在DHT11中已经介绍过。虽说这两者外设都是单总线&#xff0c;但时序电路却很不一样&#xff0c;DS18B20是更为麻烦一点的。 DS18B20 举例&#xff08;原码补码反码转换_原码反码补码转换_王小小鸭的博客-CSDN博客…
阅读更多...
什么是计算机视觉,计算机视觉的主要任务及应用

什么是计算机视觉,计算机视觉的主要任务及应用

目录 1. 什么是计算机视觉 2. 计算机视觉的主要任务及应用 2.1 图像分类 2.1.1 图像分类的主要流程 2.2 目标检测 2.2.1 目标检测的主要流程 2.3 图像分割 2.3.1 图像分割的主要流程 2.4 人脸识别 2.4.1 人脸识别的主要流程 对于我们人类来说&#xff0c;要想认出身边…
阅读更多...
【80天学习完《深入理解计算机系统》】第十天 3.3 条件码寄存器【CF ZF SF OF】

【80天学习完《深入理解计算机系统》】第十天 3.3 条件码寄存器【CF ZF SF OF】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09; 　 文章字体风格&#xff1a; 红色文字表示&#…
阅读更多...
01.sqlite3学习——数据库概述

01.sqlite3学习——数据库概述

目录 重点概述总结 数据库标准介绍 什么是数据库&#xff1f; 数据库是如何存储数据的&#xff1f; 数据库是如何管理数据的&#xff1f; 数据库系统结构 常见关系型数据库管理系统 关系型数据库相关知识点 数据库与文件存储数据对比 重点概述总结 数据库可以理解为操…
阅读更多...
串行FIR滤波器

串行FIR滤波器

串行 FIR 滤波器设计 串行设计&#xff0c;就是在 16 个时钟周期内对 16 个延时数据分时依次进行乘法、加法运算&#xff0c;然后在时钟驱动下输出滤波值。考虑到 FIR 滤波器系数的对称性&#xff0c;计算一个滤波输出值的周期可以减少到 8 个。串行设计时每个周期只进行一次乘…
阅读更多...
网络安全（黑客）零基础自学

网络安全（黑客）零基础自学

网络安全是什么&#xff1f; 网络安全&#xff0c;顾名思义&#xff0c;网络上的信息安全。 随着信息技术的飞速发展和网络边界的逐渐模糊&#xff0c;关键信息基础设施、重要数据和个人隐私都面临新的威胁和风险。 网络安全工程师要做的&#xff0c;就是保护网络上的信息安…
阅读更多...
phpstorm动态调试

phpstorm动态调试

首先在phpstudy搭建好网站&#xff0c;在管理拓展开启xdebug拓展 查看php.ini配置已经更改 需要增添修改一下设置 [Xdebug] zend_extensionD:/phpstudy_pro/Extensions/php/php5.6.9nts/ext/php_xdebug.dll xdebug.collect_params1 xdebug.collect_return1 xdebug.auto_trace…
阅读更多...
Word导出创建Adobe PDF其中emf图片公式马赛克化及文字缺失

Word导出创建Adobe PDF其中emf图片公式马赛克化及文字缺失

软件版本 Word 2021 Visio 2019 Adobe Acrobat Pro 2020 问题描述 公式马赛克化&#xff0c;是指在Word中使用MathType编辑的公式&#xff0c;然后在Visio中使用图片(增强型图元文件)形式得到的粘贴对象&#xff0c;效果如下 文字缺失&#xff0c;是指Word导出→创建Adobe P…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023