浅探 Vue 组件化思路

时间 2019-11-29

标签 vue 组件思路繁體版

原文原文链接

腾讯DeepOcean原创文章：dopro.io/explore-vue…css

就在前几个月，Vue star 数突破了 100k，正式超越 React。

1、扯点家常

都说前端是个更新迭代飞快的领域，前端框架的演进也愈来愈激烈，以致于在技术社区里总看到有人求饶：“求不要更新了，老子学不动了”。

在过去的好多些年，jQuery 在前端领域都处于统治地位，在众多框架中脱颖而出，不少写惯了 jQuery 语法的开发者们，都发现再也回不去写原生 JS 了。随着时间的发展，也出现了各式各样的优秀框架，不免不一样框架的粉丝也会把不一样框架拿来对比，甚至互掐。说说今日的主角，Vue，在近几年也是很是火的一个框架。对于初学者来讲，Vue 上手的成本真的很低了，易用度很是高，而且由于是国内开发者开发的，文档都是中文，国内大批量的公司都在使用，也致使了 Vue 的增速特别快。html

不过也正是有不一样框架的更新迭代，相互竞争，才创造一个愈来愈好的前端世界。正如 Vue 开发者在 twitter 发布的一条信息：前端

2、初入 Vue 大门

1. 什么是 Vue？

Vue 是一套用于构建用户界面的渐进式框架。它有着以下特色：vue

渐进式框架，采用自底向上增量开发设计
模版双向绑定机制
利用指令（directive）对 DOM 进行封装
组件化设计思想

Vue 的组件化将 UI 页面分割为若干组件进行组合和嵌套node

2. 快速上手 Vue

工欲善其身，必先利其器。webpack

不管咱们学习哪一种框架，搭建环境是必经之路。Vue 提供了一个官方的 CLI，为单页面应用快速搭建繁杂的脚手架。固然，任何的前提都是首先你了解了 Vue 相关的概念，否则新手一上来搭建 Vue-cli，看到里面牵扯到的 webpack、npm、nodejs等等概念，也是会一脸懵逼，很容易有从入门到放弃的想法的。web

在搭建 Vue-cli 这点上，咱们不妨直接站在巨人的肩膀上，这里有一篇带你们快速开启第一个 Vue 页面的教程，很是推荐：juejin.im/entry/58f48… 。npm

3、Vue 组件化

天下武功，惟快不破。

组件化的好处不用一一细说你们都知道了，组件是 Vue.js 最强大的功能之一，让咱们用独立可复用的小组件来构建大型应用，开发效率更快更敏捷。为了更好地复用，这里以创建弹窗组件为实例，谈谈如何创建一个项目的组件库。浏览器

1. 组件库结构前端框架

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
qqcartoon-ui // 组件库名字复制代码├── index.js // 组件文件复制代码├── aa1 // 各个组件包复制代码├── bb1复制代码├── dialog 复制代码 ├── index.js // 组件注册复制代码 ├── src复制代码 ├── index.scss // 组件样式复制代码 ├── index.vue // 组件结构 复制代码├──复制代码└── ... 复制代码

通常在 Vue 里，咱们会把组件写在 components 里，可是为了创建一个能够多个项目共用的组件库，这里从新命名，如 qqcartoon-ui 。

index.js：收录了组件库里各个组件，以做为实例引用的入口。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
import UIDialog from './dialog/index'复制代码import UIA from './aa1/index'复制代码import UIB from './bb1/index'复制代码复制代码export {复制代码  UIDialog,复制代码  UIA,复制代码  UIB复制代码}复制代码

dialog/index.js：完成组件注册。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
import UIDialog from './src/index';复制代码复制代码UIDialog.install = function(Vue){复制代码    Vue.component(UIDialog.name,UIDialog);复制代码};复制代码复制代码export default UIDialog;复制代码

dialog/index.scss：组件样式。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
.ui-dialog {复制代码    position: fixed;复制代码    top: 0px;复制代码    left: 0px;复制代码    width: 100%;复制代码    height: 100%;复制代码    z-index: 9999;复制代码    -webkit-box-orient: horizontal;复制代码    -webkit-box-pack: center;复制代码    -webkit-box-align: center;复制代码    background: rgba(0,0,0,0.4);复制代码}复制代码...... 省略其他样式代码复制代码

dialog/index.vue：组件结构。组件的模版只能有一个根元素。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
<template>复制代码    <div class="ui-dialog" :style="{diaplay:show?'-webkit-box':'none'}">复制代码        <div class="ui-dialog-cnt">复制代码            <div class="ui-dialog-bd">复制代码                <h4>{{title}}</h4>复制代码            </div>复制代码        </div>复制代码    </div>复制代码</template>复制代码<style lang="scss" src="./index.scss"></style>复制代码<script>复制代码    export default {复制代码        name:'UIDialog',复制代码        props:{复制代码            show:{复制代码                type:Boolean,复制代码                default:false复制代码            },复制代码            title:{复制代码                type:String,复制代码                default:"这是标题"复制代码            }复制代码        }复制代码    }复制代码</script>复制代码

2. 组件的引用

在项目的根目录下，你能够找到一个 js 文件，可能它的命名是 main.js。在里面引入你须要的组件名。

 
 
 
 
  
  
  
  
  
  
  
  
 
 
 
 
import {UIDialog} from '@/qqcartoon-ui/packages/index'复制代码Vue.use(UIDialog)复制代码

这个时候，弹窗组件就已经引用到项目中了，这时候只须要最后一步，在项目 vue 文件里使用：

 
 
 
 
  
  
  
  
 
 
 
 
<UIDialog :show="true"></UIDialog>复制代码

这个时候编译代码，就能够在浏览器看到最终的弹窗效果啦！

4、Vue 组件规范化

没有规矩，难成方圆。

要搭建一个好的组件库，应该一开始要定下一些通用的规矩。

1. 命名

组件的命名应该与业务无关，而是根据组件实现的功能来进行命名。同时，也应该与业务文件命名区分开来，能够加一些特有的前缀。例如在这里，全部组件前缀都添加 “UI” ，弹窗组件命名为 “UIDialog”。

2. 实现

可复用组件实现的应该是通用的功能，它实现的应该是：

UI 的展现
与用户的交互（事件）
动画效果

可复用组件应尽可能减小对外部条件的依赖。一个独立的功能组件，最好不要拆成若干个小组件来实现。

3. 理解组件属性和事件

在 Vue 组件里，状态称为 props，事件称为 events，片断称为 slots。

props 容许外部环境传递数据给组件。

经过 props 来声明本身的属性。能够经过上文 dialog/index.vue 代码进行理解。它的 type 即类型有：String、Number、Boolean、Array、Object、Date、Function、Symbol。

events 容许组件出发外部环境的反作用。

能够经过用 v-on 来监听 Dom 事件。语法：v-on:事件类型=“事件处理函数名”。缩写为： @事件类型=“事件处理函数名”。

一个直观的例子是：

  
  
  
  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

  
  
  
  
<ul id="app">复制代码    <li v-on:click = "clickMe">单击事件</li>复制代码</ul>
复制代码
复制代码<script>
复制代码    var app = new Vue({复制代码    el : '#app',复制代码    data : {复制代码    },复制代码    methods : {复制代码        clickMe : function(){复制代码            console.log('单击事件发生');复制代码        }复制代码    }复制代码})
复制代码</script>
复制代码

slot 容许外部环境将额外的内容组合在组件中。

slot 至关于在子组件设置了一个地方，当调用它的时候，往它的开闭标签之间放了东西，那么它就把这些东西放到 slot 中。经过 slot 咱们调用组件的时候就能够根据须要改变组件的实际内容。

例如子组件模版：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
<div>复制代码  <h2>我是子组件的标题</h2>复制代码  <slot>复制代码    只有在没有要分发的内容时才会显示。复制代码  </slot>复制代码</div>复制代码

父组件模版：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
<div>复制代码  <h1>我是父组件的标题</h1>复制代码  <my-component>复制代码    <p>这是一些初始内容</p>复制代码  </my-component>复制代码</div>复制代码

渲染结果：

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

 
 
 
 
<div>复制代码  <h1>我是父组件的标题</h1>复制代码  <div>复制代码    <h2>我是子组件的标题</h2>复制代码    <p>这是一些初始内容</p>复制代码  </div>复制代码</div>复制代码

5、总结

组件，是一个具备必定功能，且不一样组件间功能相对独立的模块。组件能够是一个按钮、一个输入框、一个视频播放器等等。打造可复用的组件，应该具有高内聚、低耦合的特色。本文带你们走进 Vue 组件化的世界，要想真正成为 Vue 头号玩家，仍是要多实操练习，在项目中不断思考。