Vue之组件化开发

最新推荐文章于 2024-09-03 21:44:01 发布
最新推荐文章于 2024-09-03 21:44:01 发布
阅读量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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue关于组件化开发知识点详解
10-15
Vue.js 的组件化开发是其核心特性之一，它允许开发者将UI拆分成可复用的模块，从而提高代码的可维护性和效率。下面将详细讲解Vue组件化的关键知识点： 1. **全局组件注册**：Vue.component()方法用于全局注册组件，...
web实现统计网页点击量
一叶的博客
08-13 2299
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 { } .
Vue2知识点汇总—尚硅谷
weixin_50637054的博客
04-21 6264
Vue2知识点——尚硅谷
Vue2【尚硅谷--天禹老师】：Vue组件化编程
m0_63077733的博客
03-05 753
Vue2【尚硅谷--天禹老师】：Vue组件化编程
vue列表显示和计数器（体验响应式）
407指导员
12-08 482
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
【JaveWeb】JavaWeb
qq_44530108的博客
03-25 439
HTML 网页的组成部分 页面由三部分内容组成，分别是内容（结构）、表现、行为。 - 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用**html 技术**来展示。 - 表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用**CSS 技术**实现 - 行为，指的是页面中元素与输入设备交互的响应。一般使用 **javascript技术**实现 HTML 标签 常用标签 1、font 字体标签 font 标签是字体标签,它可以用来修改文本的字体,颜色,
Vue组件化开发思考
08-28
Vue组件化开发是一种高效、可复用且易于维护的编程方式，它将应用程序的不同部分划分为独立的组件，每个组件负责特定的功能。组件可以像拼积木一样组合在一起，构建出复杂的用户界面。在深入讨论Vue组件化之前，我们...
Vue入门-组件化
shenzhen_zsw的专栏
06-13 262
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
Vue前端路由详解——以Ruoyi框架为案例学习
最新发布
警警的博客
09-03 500
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 855
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1673
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2412
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 831
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
vue3+ts封装一个uniapp的自动滚动列表，实现看板效果
qq_51384850的博客
08-31 852
自行配置滚动时间，滚动的高度默认为一行数据的高度，当数据更新的时候，会对新旧数据进行比较，在旧数据的基础上删除解除异常了的数据，将新增异常数据加到数据的最顶部，重新开始从顶部滚动，实现数据在电视机上的实时刷新和展示
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 427
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 899
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
ant design vue+vue3+ts实现一天内按钮只能点击2次，并置灰，且过当天0点时需复原~
m0_62626838的博客
08-31 449
第二步：针对一天内按钮只能点击2次需求，首先我们要拿到当前的系统日期及明天日期，并转化为“2024-09-01”格式，为后续通过Date.parse()转化为总毫秒数做对比，来实现点击次数，但此时容易忽略一个问题，即弹窗是通过v-if实现的，每一次进来都会重新渲染，在子组件中定义的点击次数变量会清零，所以此时需要进行状态管理，这里使用的是pinia来实现的，将点击次数等数据存储在pinia中，然后在弹窗组件中使用即可。第三步：针对过0点之后复原问题。（这里应计算大于等于，后续优化）
Vue.js组件化开发实战与ES6特性探讨
"VUE.JS组件化开发实践" 在前端开发中，Vue.js是一个流行的JavaScript框架，尤其适合进行组件化的应用开发。组件化开发允许开发者将复杂的用户界面拆分成可重用、独立的模块，提高了代码的复用性和可维护性。在本文...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值