懂个锤子Vue 项目工程化进阶⏫:

Vue项目工程化进阶⏫:

前言: 紧跟前文,目标学习Vue2.0——3.0: 懂个锤子Vue、WebPack5.0、WebPack高级进阶 涉及的技术栈…

当然既然学习框架的了,HTML+CSS+JS三件套必须的就不说了: JavaScript 快速入门

学习前置链接: 懂个锤子Vue 项目工程化

组件的样式冲突:

在 Vue 开发中,组件样式冲突是一个常见的问题: 为什么会发生组件样式冲突⁉️

我们都知道,组件是由:模板Template\脚本Script\样式Style 组成,每个组件都是有自己的三件套)

但,因为Vue在运行过程中,本质是将多个组件合并成一个:html文件

所以,多个组件样式,相互匹配就发生组件样式冲突:

在这里插入图片描述

解决样式冲突

Vue支持定义全局\局部样式:

默认情况: 组件中的样式会,全局生效 → 很容易造成多个组件之间的样式冲突问题,

  • 全局样式: 默认组件中的样式会作用到全局
  • 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件

在这里插入图片描述

scoped原理

scoped可以让组件样式变成局部样式: 组件都应该有独立的样式

  • scoped: 给当前组件模板的所有元素,都会添加上一个自定义属性data-v-hash值
  • data-v-hash值:用于区分开不通的组件,渲染样式时css选择器 后面,被自动处理,添加上了属性选择器;

组件的 data函数:

在 Vue 组件中,data 函数的主要作用是为每个组件实例提供独立的数据对象:

  • 因为: 一个组件可能会使用多次, 如果通过原始属性定义,多个组件会依赖一个数据源;
  • 通过: date(函数){ return {} } return返回对象,确保每一个组件都是独立的数据源;

**访问组件实例: ** 在 data(){ //函数内部 } 你可以访问组件实例的其他属性和方法;

响应式系统: Vue响应式系统,会将 data 函数 返回的对象包裹起来,

并以 $data 的形式存储在组件实例;数据发生变化,自动更新视图;

<!-- 模板结构 -->
<template><div><P>A组件: 声明成功!</P><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><!-- 脚本结构 -->
<script> export default {//原始定义:组件不支持\报错x)// data: {//     //基本数据类型使用//     count:1// },//组件函数式定义:data(){//因为: 一个组件可能会使用多次,如果通过原始属性,多个组件会依赖一个数据源;//通过: date(函数){ return {} } return返回对象,确保每一个组件都是独立的数据源;return {count:1}}}
</script><!-- 样式结构 -->
<!-- style中的样式,默认是作用到全局的scoped可以让样式变成局部样式,组件都应该有独立的样式,推荐scoped 原理)scoped给当前组件模板的所有元素,都会添加上一个自定义属性data-v-hash值 用于区分开不通的组件,css选择器后面,被自动处理,添加上了属性选择器;
-->
<style scoped>div{border: 3px solid red;margin: 30px;}
</style>

在这里插入图片描述

组件的通信📶

Vue.js 是一个基于组件的框架,应用通常由多个组件组成:

组件通信是指在 Vue.js 应用中,不同组件之间传递数据和消息的过程:

组件之间的数据是独立的,无法直接访问其他组件的数据,组件通信的主要目的是:

  • 数据共享:在父子组件之间或兄弟组件之间共享数据;
  • 事件传递:在组件之间传递事件,以响应用户操作或其他事件;

组件之间有哪些关系?

  • 父子关系: 一个组件包含另一个组件

    例如,组件A 包含组件B +组件C,那么 A 和 B、C 是父子关系;

  • 非父子关系: 也有开发者称为兄弟\隔代关系,同一个父组件下的多个子组件之间的关系;

    组件B组件C 都是组件A 的子组件,那么 B 和 C 是兄弟关系;

    组件A 包含组件B组件B 又包含组件D,那么 A 和 D 是隔代关系;

在这里插入图片描述

对应的组件通信方案有哪几类? 这里简单介绍,常用的几种;

  • Props 和 $emit:用于父子组件之间的通信;
  • provide 和 inject:用于祖先组件和后代组件之间的通信;
  • 事件总线(Event Bus):通过创建一个空的 Vue 实例作为中央事件总线,用它来触发和监听事件,实现任意组件间的通信;
  • Vuex:用于全局状态管理,适用于大型应用,通过 Vuex 的 store 来管理全局状态,实现组件间的通信;

父子组件通信:

父—>子通信:

Props 是父组件向子组件传递数据的机制,

父组件通过在子组件标签上绑定属性来传递数据,子组件通过声明 props 来接收这些数据;

在这里插入图片描述

  • Prop 定义\使用: 父组件在子组件上,注册的一些 自定义属性:<组件名 :属性名='传递值' ></组件名>
  • 子组件通过:props 获取父组件的数据,props:['属性名']props中的属性可以像data中数据一样使用;

props 详解\校验:

Props 作用: 向子组件传递数据,可以传递任意数量、可以传递任意类型

在这里插入图片描述

props 校验是确保传递给组件的数据符合预期的一种机制: 通过定义 props 的类型和验证规则,提高组件可靠性和可维护性;

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

在这里插入图片描述

data & props 区别:

在 Vue.js 中,propsdata 都是用于管理组件数据的重要机制,但它们有一些显著的区别:

  • data:用于组件内部管理数据,组件可以自由修改

  • props:用于父组件向子组件传递数据,子组件只能读取,不能修改

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

    父组件更新 props,子组件会接收到最新的数据,但子组件不能直接修改 props 的值,子组件修改值报错

在这里插入图片描述
在这里插入图片描述

检测到props 中数据修改报错,Vue直接抛出异常! 那么如何修改父组件的数据呢?

子—>父通信:

👆这就涉及到子——父 通信了,那么如何: 子—>父通信:

BaseCount.vue: 子组件通过调用 $emit 方法触发一个@自定义事件

并传递需要发送的数据:this.$emit('自定义事件名', 传递给父组件数据)

<!-- 模板结构 -->
<template><div class="base-count"><button @click="handleSub">-</button><span>{{ count }}</span><button @click="handleAdd">+</button></div>
</template>
<!-- 脚本结构 -->
<script>
export default {//子组件data数据data(){ return { dcount:0 } },props: {//props获取父组件数据;count: { type: Number, },},methods: {handleSub() {//子组件通过调用 $emit 方法触发一个自定义事件,并传递需要发送的数据this.$emit('changeCount', this.count - 1)},handleAdd() {this.$emit('changeCount', this.count + 1)},},
}
</script>
<!-- 样式结构 -->
<style></style>

App.vue: 父组件通过在:子组件标签上自定义监听事件,并绑定一个函数来接收处理数据;

<子组件 :属性名='传递值' @自定义监听事件="处理函数" >,当子组件调用:this.$emit('自定义事件名', 传递父组件数据)

父组件监听事件触发,并执行对应处理函数,函数内部可以获取子组件传递的数据: 处理函数(value){ //内部执行相应处理 }

<!-- 模板结构 -->
<template><div id="app" style="border: 3px solid #000; margin: 10px">App 父组件<!-- 加减组件 --><!-- 父组件通过在子组件标签上监听自定义事件,并绑定一个触发函数 --><BaseCount :count="count" @changeCount="handleChange" ></BaseCount></div>
</template><!-- 脚本结构 -->
<script>
import BaseCount from './components/BaseCount.vue'
export default {name: 'App',data(){ return { count:1, } },components: {BaseCount},methods:{handleChange(newVal){//函数获取: 子组件传递的数据,给其赋值count;this.count = newVal;}}
}
</script>
<!-- 样式结构 -->
<style></style>

在这里插入图片描述

  1. 用户点击:+\- 触发对应的子组件函数,
  2. 子组件函数内部执行:this.$emit('父组件自定义监听函数',传递值) 给父组件传递修改后的值;
  3. 父组件,事先定义子组件时: 设置,自定义监听函数,并绑定对应处理函数;
  4. 父组件,监听@自定义函数执行,并触发函数
  5. 获取子组件传递最新值,重新赋值: count
  6. 子组件页面同步数据更新;

非父子组件通信:

event bus 事件总线

在 Vue.js 中,事件总线(Event Bus)是一种用于实现非父子组件之间通信的机制

它允许我们在 Vue 应用中 创建一个全局的事件中心 ,组件通过该 事件中心来:发送\接收事件 ,实现数据的传递和共享

创建事件总线:

首先,我们需要创建一个事件总线:

  • 通常是在主文件如 main.js,中创建一个新的 Vue 实例,并将其挂载到 Vue 的原型上,以便所有组件都可以访问;
  • 还有另一种方式是直接在组件中创建和使用事件总线, 这种方法适用于局部通信需求,不需要全局事件总线;
//全局工具包
//utils/EventBus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;       	//对外暴漏公共实例;	//main.js
//const EventBus = new Vue();
//Vue.prototype.$bus = EventBus;
//将一个新的 Vue 实例即EventBus)挂载到Vue的原型上,并命名为 $bus
//这样,所有的 Vue 组件都可以通过 this.$bus 访问这个事件总线;

发送事件:

在需要发送事件的组件中,通过 实例.$emit 方法发送事件,并传递数据;

<template><div class="base-b"><div>我是B组件(发布方)</div><button @click="sendMsgFn">发送消息1</button><button @click="sendMsgFn2">发送消息2</button></div>
</template><script>
//引入局部事件总线
import Bus from '../utils/EventBus'
export default {methods: {//通过 `$bus.$emit` 方法发送事件,并传递数据;sendMsgFn() { Bus.$emit('sendMsg', '引入局部事件总线') },sendMsgFn2() { this.$bus.$emit('sendMsg2', 'this.$Bus全局事件总线') },},
}
</script>
<style scoped><!-- 省略Css样式 --></style>	

监听事件:

在需要接收事件的组件中,通过 $bus.$on 方法监听事件,并处理接收到的数据;

<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) => { this.msg = msg });		//接受局部事件总线消息this.$bus.$on('sendMsg2', (msg) => { this.msg = msg });	//接受全局事件总线消息},
}
</script>
<style scoped><!-- 省略Css样式 --></style>	

在这里插入图片描述

注意事项

事件移除:在组件销毁前,应该移除事件监听,以避免内存泄漏和重复监听,

全局事件总线: 虽然事件总线使用方便,但在大型应用中可能会导致难以维护的“灾难”,

因此需要谨慎使用,对于复杂的状态管理,推荐使用 Vuex:

provide & inject 跨层级共享数据

在 Vue.js 中,provideinject 是一种高级的数据传递机制:

主要用于解决组件树中深层组件间通信的问题,特别是当不直接存在父子关系时

它们允许父组件提供一个值,而任何后代组件都可以通过 inject 来接收这个值;如:上图D—A的隔代通信;

根组件发送消息:

父组件使用 provide 提供数据: 父组件通过 provide(){ return { 发送数据 } } 选项将数据提供给子组件及其后代组件;

<template><div id="app" style="border: 3px solid #000; margin: 10px">App 父组件<Son3></Son3></div>
</template><script>
import Son3 from './components/Son3.vue';
export default {name: 'App',components: { Son3, },data() { return { color: 'pink', userInfo: { name: 'zs', age: 18, }, } },//父组件使用 provide 提供数据:provide() {return {// 简单类型是非响应式的color: this.color,// 复杂类型 是响应式的userInfo: this.userInfo,}},
}
</script>

后代组件接受消息:

子组件使用 inject 接收数据: 子组件通过 inject: ['匹配数据名', '匹配数据名','...'] 选项注入这些数据;

<template><div class="grandSon">我是GrandSon{{ color }} -{{ userInfo.name }} -{{ userInfo.age }}</div>
</template><script>
export default {//子组件使用 inject 接收数据:inject: ['color', 'userInfo'],
}
</script>

在这里插入图片描述

响应式数据、问题:

需要注意的是,provide 提供的简单类型数据(如字符串、数字)是非响应式的,

而复杂类型数据(如对象、数组)是响应式的,这意味着子组件可以监听到复杂类型数据的变化;

版本管理:

本代码已经使用Git进行管理: 公众号回复:Vue项目工程化

在这里插入图片描述

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

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

相关文章

Java中的异步非阻塞I/O操作

Java中的异步非阻塞I/O操作 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨一下Java中的异步非阻塞I/O操作。 一、异步非阻塞I/O简介 异步非阻塞I/O&#xff08;Asynchronous Non-Bl…

7-25学习笔记

一、锁对象 Lock接口 1、创建锁对象 ReentrantLock类 Lock locknew ReentrantLock(true); 默认创建的是非公平锁 在创建锁对象时传入一个true参数 便会创建公平锁 先来后到 是重入锁 排他锁 加锁后不允许其它线程进入 2、加锁、解锁 &#xff08;1&#xff09;loc…

OWASP ZAP:一款功能强大的开源Web安全扫描工具

目录 介绍 安装和配置 下载和安装 启动和配置 主界面概述 基本功能 自动扫描 手动测试 被动扫描 主动扫描 高级功能 代理功能 Fuzzer API 插件和扩展 使用场景 开发阶段 测试阶段 生产环境 实践案例 案例一&#xff1a;自动化扫描 案例二&#xff1a;手动…

Redis-数据的极速之旅(一)

Redis基础篇 Redis的自我介绍我的核心数据结构1.字符串&#xff08;String&#xff09;2.哈希&#xff08;Hash&#xff09;3.列表&#xff08;List&#xff09;4.集合&#xff08;Set&#xff09;5.有序集合&#xff08;Sorted Set&#xff09; 高性能原理1.Redis为什么快&…

B端系统UI个性化设计:感受定制之美

B端系统UI个性化设计&#xff1a;感受定制之美 引言 艾斯视觉作为ui设计和前端开发从业者&#xff0c;其观点始终认为&#xff1a;在当今竞争激烈的商业环境中&#xff0c;B端&#xff08;Business-to-Business&#xff09;系统的设计不再仅仅是功能性的堆砌&#xff0c;而是…

在线工具(网站)

1. 网站漏洞扫描程序 网站漏洞扫描程序是一种高度准确的漏洞扫描解决方案&#xff0c;经过了实际渗透测试的考验。快速检测 XSS、SQL 注入、命令注入、XXE 和其他关键问题 — 自动验证以消除误报。 https://pentest-tools.com/website-vulnerability-scanning/website-scanne…

ChatGPT建议前端学习计划

HTML&CSS基础 - 学习HTML标签、CSS属性、页面布局等基础知识 JavaScript基础 - 学习变量、数据类型、控制流、函数等基础知识 jQuery - 学习如何使用jQuery处理文档对象模型&#xff08;DOM&#xff09;、事件、动画等 Ajax - 全称为 Asynchronous JavaScript and XML&…

【sklearn实战】datasets数据集简介

一 sklearn.datasets数据集 sklearn.datasets 中主要包含了4类数据集。 1.1 Toy datasets&#xff08;玩具数据集&#xff09; scikit-learn 内置的一些小型标准数据集&#xff0c;不需要从某个外部网站下载任何文件&#xff0c;用datasets.load_xx()加载。比如&#xff1a;…

AJAX(1)

什么是AJAX? AJAX是异步的JavaScript和XML。简单来说&#xff0c;就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它异步的特性&#xff0c;也就是说它可以在不重新刷新页面的情况下与服务器通信&#…

打包团队,招机器视觉工程师整个团队,缺陷检测经验更佳,BOSS半导体大厂背景,不愁订单,现精耕于半导体,PCB,PCBA视觉检测

打包团队&#xff0c;招机器视觉工程师整个团队&#xff0c;缺陷检测经验更佳&#xff0c;BOSS半导体大厂背景&#xff0c;不愁订单&#xff0c;现精耕于半导体&#xff0c;PCB&#xff0c;PCBA视觉检测 视觉人机器视觉 视觉人机器视觉教学 2024年07月28日 00:21 江苏 苏州大视…

C#:通用方法总结—第6集

大家好&#xff0c;今天继续介绍我们的通用方法系列。 下面是今天要介绍的通用方法&#xff1a; &#xff08;1&#xff09;这个通用方法为SW查找草图数量 /// <summary> /// 查找草图数量 /// </summary> /// <param name"doc2"></param>…

书生大模型实战营--L1关卡-OpenCompass 评测 InternLM-1.8B 实践

一、使用 OpenCompass 评测 internlm2-chat-1.8b 模型在 MMLU 数据集上的性能 1、使用lmdeploy部署 internlm2-chat-1.8b模型 2、根据OpenCompass官网教程安装并下载数据集 opencompass/README_zh-CN.md at main open-compass/opencompass GitHub 注意&#xff1a; pyhton…

JAVAWeb实战(前端篇)

项目实战一 0.项目结构 1.创建vue3项目&#xff0c;并导入所需的依赖 npm install vue-router npm install axios npm install pinia npm install vue 2.定义路由&#xff0c;axios&#xff0c;pinia相关的对象 文件&#xff08;.js&#xff09; 2.1路由(.js) import {cre…

当全球银行系统“崩溃”时会发生什么?

有句名言&#xff1a;“当美国打喷嚏时&#xff0c;世界就会感冒……”换句话说&#xff0c;当人们对美国及其经济稳定性的信心下降时&#xff0c;其他经济体&#xff08;以及黄金、白银和股票等资产&#xff09;的价值往往会下降。 与任何其他资产类别一样&#xff0c;加密货…

超详细-数据结构-二叉树概念及结构,堆的概念及结构以及堆的代码的c语言实现

本篇博客将详细讲述二叉树的概念&#xff0c;堆的概念及结构以及堆的代码实现&#xff0c;以及二叉树&#xff0c;堆的相关应用。Top K 问题&#xff0c;堆排序的实现以及二叉树链式结构的实现将在之后的博客更新。你可在目录中找到你想重点阅读的内容。堆的完整代码实现在文章…

如何撤销/回滚远程修改

1. git revert 通过git revert commit_id&#xff0c;撤销指定commit&#xff0c;然后push到远程分支&#xff0c;即可撤销指定commit的修改&#xff0c;并新增一个revert的提交记录。 2. 撤销HEAD的修改并删除提交记录 git reset --hard HEAD^ # 撤销最近一次的修改 git pu…

【秋招笔试题】方程

解析&#xff1a;暴力枚举。建议用Python的eval函数,C手写略麻烦。 #include <iostream> #include <string> #include <vector> #include <sstream>using namespace std;long long stringResult(const string &expr) {vector<string> plusP…

文字改视频技术——Rerender A Video

Rerender A Video 的实现技术结合了深度学习、计算机视觉、图像处理、GPU 加速和云计算等多种先进技术&#xff0c;旨在提供高效、优质的视频渲染和增强功能。以下是详细说明&#xff0c;特别突出风格迁移技术的解释。 一、Rerender A Video 介绍 Rerender A Video 利用深度学…

visual studio性能探测器使用案列

visual studio性能探测器使用案列 在visual studio中&#xff0c;我们可以使用自带的工具对项目进行性能探测&#xff0c;具体如下 1.选择性能探查器 Vs2022/Vs2019中打开方式&#xff1a; Vs2017打开方式&#xff1a; 注意最好将解决方案配置为&#xff1a;Release Debu…

昇思25天学习打卡营第22天|CycleGAN图像风格迁移互换

相关知识 CycleGAN 循环生成网络&#xff0c;实现了在没有配对示例的情况下将图像从源域X转换到目标域Y的方法&#xff0c;应用于域迁移&#xff0c;也就是图像风格迁移。上章介绍了可以完成图像翻译任务的Pix2Pix&#xff0c;但是Pix2Pix的数据必须是成对的。CycleGAN中只需…