Vue之组件化开发

最新推荐文章于 2024-09-21 11:29:05 发布
最新推荐文章于 2024-09-21 11:29:05 发布
阅读量192 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38294099/article/details/115056706
版权

Vue之组件化开发

一、组件化开发思想

一块一块的，标准，分治，重用，组合；
在这里插入图片描述
跟之前的布局思想差不多吧，页面是一个一个盒子组成的，然后这个盒子的代码单独去写
在这里插入图片描述
组件化规范：Web Components但是有浏览器兼容问题；Web Components通过创建封装好功能的定制元素解决上述问题，Vue部分实现了上述规范；

二、Vue调试工具用法

组件最终也会渲染成DOM，为了区别层次关系可以使用Vue调试工具，
首先需要安装Vue-Devtools参考但是在参考这个方法安装的时候出现了错误
在这里插入图片描述
查找资料以后安装旧版本5.1.1
参考2
安装5.1.1之后成功

三、组件注册方式

1. 组件注册方式

组件就是把一个功能封装成可以重复利用的代码，比如下面的按钮，可以直接复制使用实现一样的效果；
在这里插入图片描述

2. 组件注册注意事项

  • data必须是一个函数，使用函数形成了一个闭包的坏境保证每个实例有一份独立的数据；
  • 组件模板内容必须是单个根元素，不能有兄弟节点，但是可以是一个父亲包含几个儿子；
  • 组件模板内容可以是模板字符串，当内容过多的时候使用模板字符串结构看起来更加清晰；
  • 组件命名方式如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是
    在普通的标签模板中，必须使用短横线的方式使用组件    在定义的时候用的HelloWorld使用的时候是hello-world
    在这里插入图片描述

3. 局部组件注册方式

局部组件只能在注册它的父组件中使用，自定义指令也是这样的，局部自定义指令只能在注册它的范围中应用；
在这里插入图片描述

四、组件间的数据交互方式

1. 父组件向子组件传值

  • 组件内部通过props接收传递过来的值，子组件通过props来接收父组件传过来的值
  • 父组件通过属性将值传给子组件
    在这里插入图片描述
  • 在props中用的是驼峰命名，但是子组件使用的时候需要用-形式，字符串形式模板没有这个限制，这个和当初的组件命名规则类似；
    在这里插入图片描述
  • props属性值类型
    props属性值类型有字符串String、数值Number、布尔值Boolean、数组Array、对象Object；
    String就正常的传递，但是Number
    在这里插入图片描述

2. 子组件向父组件传值

props传递数据原则：单向数据流 不在子组件操作父组件传过来的数据，所以父组件需要监听子组件事件，子组件要通过自定义事件向父组件传递信息

  • 子组件通过自定义事件向父组件传递信息
  • 父组件监听子组件事件
    在这里插入图片描述
    在这里插入图片描述

3. 非父子组件传值

可以当作兄弟之间的传值，不再使用props而是有一个事件中心管理组件间的通信；
在这里插入图片描述
比如下面的TOM和JERRY是兄弟组件然后点击TOM使得JERRY+2，点击JERRY使得TOM+1；
在这里插入图片描述
在这里插入图片描述
具体代码：
在这里插入图片描述

五、组件插槽用法

父组件向子组件传递内容，这里的内容指的是模板
在这里插入图片描述

  • 插槽方式
    在这里插入图片描述
    页面显示结果如下：
    在这里插入图片描述
  • 具名插槽用法，有名字的插槽
    在这里插入图片描述
  • 作用域插槽
    在这里插入图片描述

六、基于组件的方式实现业务功能

1. 购物车案例

效果图：
在这里插入图片描述
按照上面的分为三个组件，标题组件，列表组件，结算组件；
在这里插入图片描述
完整代码：D:\web_study\vue\day03组件化开发

xll2021
关注
专栏目录
Vue入门-组件化
shenzhen_zsw的专栏
06-13 271
Vue入门-组件化6.组件化6.1.全局组件6.2.组件的复用6.3.局部注册6.4.组件通信6.4.1.props（父向子传递）6.4.2.props验证6.4.3.动态静态传递6.4.4.子向父的通信 6.组件化 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。 但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面...
2021-01-17 Vue组件化思想及实践
xumaozeng的博客
01-17 216
2021-01-15 Vue组件化思想及实践组件化 组件化 vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率、方面重复使用、简化调试步骤、提升项目可维护性，便于多人协同开发 组件通信常用方式 props $emit/$on event bus vuex 边界情况 $parent $children $root $refs provide/inject 非props特性 - $attrs - $listeners
【JaveWeb】JavaWeb
qq_44530108的博客
03-25 444
HTML 网页的组成部分 页面由三部分内容组成，分别是内容（结构）、表现、行为。 - 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用**html 技术**来展示。 - 表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用**CSS 技术**实现 - 行为，指的是页面中元素与输入设备交互的响应。一般使用 **javascript技术**实现 HTML 标签 常用标签 1、font 字体标签 font 标签是字体标签,它可以用来修改文本的字体,颜色,
Vue2【尚硅谷--天禹老师】：Vue组件化编程
m0_63077733的博客
03-05 758
Vue2【尚硅谷--天禹老师】：Vue组件化编程
Vue2知识点汇总—尚硅谷
weixin_50637054的博客
04-21 6559
Vue2知识点——尚硅谷
Vue组件化开发
failte的博客
08-26 2710
文章目录Vue组件化开发组件化开发：Vue实例方法与属性Vue.extend与Vue.Component全局指定、组件、方法实例：Popup插件的封装 Vue组件化开发 组件化开发： 1、组件化开发指的是将复杂的业务拆分为一个有一个的组件 2、组件化开发的组件一般来说要灵活 3、组件化开发涉及到了Vue的js组件封装，需要掌握Vue基础、Vue实例方法与属性、Vue.extend、Vue插件等知识...
Vue——组件化开发
鹿蹊zz的博客
08-09 2352
我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到。​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。并不保证顺序，也不是响应式的。...
Vue 组件化开发
二哈喇子！
07-12 4027
父子组件相互传数据
Vue关于组件化开发知识点详解
10-15
Vue.js 的组件化开发是其核心特性之一，它允许开发者将UI拆分成可复用的模块，从而提高代码的可维护性和效率。下面将详细讲解Vue组件化的关键知识点： 1. **全局组件注册**：Vue.component()方法用于全局注册组件，...
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
初识Vue-组件化开发（详解各个组件）
百赢出品，必属精品
05-02 1684
Vue.js中的组件是可复用的Vue实例，具有自己的模板、逻辑和样式。组件允许开发者将页面分割成独立、可复用的模块，使得代码更易维护、可读性更高。每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。一个应用需要被挂载到一个 DOM 元素中。const RootComponent = { /* 选项 */ }// 创建一个Vue 应用。
13.vue3组件化开发
phoebemeng的博客
09-05 1343
学习笔记：动态组件，异步组件，认识生命周期，组件的v-model
web实现统计网页点击量
一叶的博客
08-13 2303
web实现统计网页点击量 下面是我写的网页HTML文件 源代码Hello world： package runoob; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class helloworld { public String message = "Hello World"; public void init() throws ServletException { } .
vue列表显示和计数器（体验响应式）
407指导员
12-08 484
vue列表显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue列表展示</title> </head> <body> <div id="app"> <ul> <li v-for="item in movies">{{item}}</l
vue 中如何实现鼠标拖动出发滚动条的跟随移动？
sinat_33255495的博客
09-20 375
如果要实现鼠标辅助触发滚动条的移动，需要借助 mousedown，mouseup，mousemove 三个事件，通过鼠标的移动来动态修改滚动条的scrollLeft和scrollTop,来模拟实现滚动条的位置变更。在做弹窗、表单或 tab 切换需求的时候，有时候因为内容过长会导致出现滚动条，但是只能拖动滚动条时会导致操作不便，我们会希望实现通过拖动内容区实现滚动条的滑动。这样操作就会简单多了。为方便复用，我们可以创建一个类来封装鼠标事件，使用时把事件挂载到指定容器即可。这样就实现啦，就是如此简单！
小明，谈谈你对Vue nextTick的理解
wujiayu31415的博客
09-19 329
是一个重要的异步操作工具，用于在 DOM 更新完成后执行回调函数。，Vue 提供了一种高效的方式来处理异步更新，帮助开发者在数据变更后正确执行逻辑。在使用一些依赖于 DOM 状态的第三方库时，确保它们在 Vue 更新后执行，可以避免潜在的错误。这种实现机制确保了 Vue 的响应式特性可以平滑运行，并保证了数据与视图之间的高度一致性。：在 Vue 的响应式系统中，当数据发生变化时，相关的组件会被标记为需要更新。的回调会在 DOM 更新完成后被执行，从而确保了在 DOM 变化之后获取最新的状态。
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 281
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
2024 vue3入门教程：02 我的第一个vue页面
m0_47484034的博客
09-19 209
2024 vue3入门教程：02 我的第一个vue页面
基于python+django+vue的美术馆预约系统
计算机学姐的博客
09-18 1282
【2025最新】基于协同过滤+python+django+vue+MySQL的美术馆预约系统，前后端分离。
Vue.js组件化开发实战与ES6特性探讨
"VUE.JS组件化开发实践" 在前端开发中，Vue.js是一个流行的JavaScript框架，尤其适合进行组件化的应用开发。组件化开发允许开发者将复杂的用户界面拆分成可重用、独立的模块，提高了代码的复用性和可维护性。在本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值