淺探 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>複製代碼