Vue通用组件的封装
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue通用组件的封装相关的知识,希望对你有一定的参考价值。
参考技术A 最近项目做完了,抽出一些时间做一些总结,主要是针对于可复用组件的解耦和样式复用。为了解耦,子组件本身就不能生成数据。即使生成了,也只能在组件内部运作,不能传递出去,下面是在一些较复杂的场景中,对props传递的参数加一些验证,也是方便如果是数据类型不符合可以直接抛出异常。
props传入参数,不建议对它进行操作,如果要操作,请先在子组件深拷贝。如果你是用JSON.stringify, JSON.parse方法深拷贝需注意:
比如某些子组件的click事件,避免高耦合,逻辑最好放在父组件中,子组件只是一个承载体。
这样既降低耦合,保证子组件中数据和逻辑不会混乱。
现在有一个需求,在同一个子组件中,我在不同的场景需要用到不同的按钮,那么在封装组件的时候就不用去写按钮,只用在合适的未知留一个slot,把按钮的位置留出来,然后再父组件中写入:
这样一个具名插槽灵活地解决了不同场景同一组件不同配置的问题。
var.less里面可以装所有的公共样式:
Vuejs组件
一、概念
①组件就是对局部视图的封装,组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图,然后利用某种特定的方式把它们组织到一起完成完整的 Web 应用构建。
②目前主流的前端框架angular,react、vue都是组件化开发思想,vue中的组件思想借鉴于react
③利用组件可以提高开发效率,增强可维护性
二、使用
①全局组件(通用组件):一般把网页中特殊的公共部分注册为全局组件,比如轮播图、tab选项卡、分页、通用导航等
<div id="app"> <my-header></my-header> <my-main></my-main> <my-footer></my-footer> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> // 组件的名字,不要使用原生的标签名称 Vue.component(\'my-header\',{ template:\'<header><h1>头部组件</h1></header>\' }); Vue.component(\'my-main\',{ template:` <div> <ul> <li>轮播图</li> <li>产品内容</li> <li>商品展示</li> </ul> </div> ` }); Vue.component(\'my-footer\',{ template:\'<footer><h1>底部组件</h1></footer>\' }); new Vue({ el:\'#app\', data:{ } });
②局部组件(子组件):一般是注册一些非通用的
<div id="app"> <my-child></my-child> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:\'#app\', data:{ }, components:{ myChild:{ template:\'<div><h3>子组件</h3></div>\' }, }, }); </script>
③组件与组件之间是相互独立的:
- 默认情况下,组件与组件之间无法进行跨组件数据访问,父子组件都不行
- 组件就是一种特殊的vue实例,不需要实例化,它管理自己的template,模板组件的template必须只有一个根节点
- 在组件中,也可以配置类似于vue实例中的一些选项资源,比如data、methods、computed等等
④组件中的data必须是函数
- 组件的data必须是函数(手动new出来的Vue实例还是普通的对象)
- 函数内部返回一个对象
- 如下面这个例子,如果data不是一个函数,则点击其中一个会影响到其他的两个,不能相互独立开来
<div id="app"> <demo></demo> <demo></demo> <demo></demo> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> Vue.component(\'demo\',{ data:function(){ return{ count:0 } }, template: \'<button v-on:click="count++">You clicked me {{ count }} times.</button>\' }); new Vue({ el:\'#app\', data:{ } }); </script>
⑤父子组件之间的数据传递:父组件通过prop向子组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model=\'message\' placeholder="请输入"> <button @click=\'add\'>添加</button> <!-- 展示组件 --> <item-list :items=\'items\'></item-list> </div> <script> Vue.component(\'item-list\',{ props:{ items:{ type:Array } }, template: ` <div> <ul> <li v-for="(item, index) in items" :key="index">{{item}}</li> </ul> </div> ` }) const app = new Vue({ el:\'#app\', data() { return { message:\'\', items:[\'HTML\',\'JS\',\'CSS\'] } }, methods: { add(){ this.items.push(this.message); this.message = \'\'; } } }) </script> </body> </html>
三、Vue组件化的理解
①定义:组件是可复用的 Vue 实例,准确讲它们是VueComponent的实例,继承自Vue。
②优点:从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性
③使用场景:什么时候使用组件?以下分类可作为参考
- 通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。
- 业务组件:它们完成具体业务,具有一定的复用性,例如登录组件、轮播图组件。
- 页面组件:组织应用各部分独立内容,需要时在不同页面组件间切换,例如列表页、详情页组件
④如何使用组件:
- 定义:Vue.component(),components选项,sfc
- 分类:有状态组件,functional,abstract
- 通信:props,$emit()/$on(),provide/inject,$children/$parent/$root/$attrs/$listeners
- 内容分发:<slot>,<template>,v-slot
- 使用及优化:is,keep-alive,异步组件
⑤组件的本质:
- vue中的组件经历如下过程 组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
- 所以组件的本质是产生虚拟DOM
如何使用组件
以上是关于Vue通用组件的封装的主要内容,如果未能解决你的问题,请参考以下文章