VUE組件化開發的精髓

時間 2019-12-04

標籤 vue 組件開發精髓简体版

原文原文鏈接

開篇：vue.js的簡單介紹和演示
vue的開發精髓-組件
vue組件的三個API：prop、event、slot
組件之間的通訊方式
實例講解：銖寶益幫助中心前端組件

開篇：vue.js的簡單介紹和演示

vue發佈於2013年，是一個漸進式的框架，同時也是一個輕量級的框架，它只關心數據，從而讓開發者不用過多的關注DOM的改變和操做DOM，vue的做者爲Evan You（尤雨溪），任職於Google Creative Labhtml

DOM：document object model（文檔對象模型）也就是操做html或xml的通用編程接口，這裏不過分描述前端

雙向綁定代碼演示

// html
<body>
    <div id="app">
        <input type="text" v-model="note">
        <p>{{ note }}</p>
    </div>
</body>

// js
var app = new Vue({
    el: '#app',
    data: {
        note: ''
    }
})
複製代碼

對比其它web前端框架，vue更容易上手，代碼和API更爲簡潔和直觀，且速度更快！vue

vue的開發精髓-組件

vue最精髓的，正是它的組件與組件化,寫一個 Vue 工程，其實就是在寫一個個的組件。web

vue組件的分類（三大類）

由 ==vue-router產生的每一個頁面==，它本質上也是一個組件（.vue），主要承載當前頁面的 HTML 結構，會包含數據獲取、數據整理、數據可視化等常規業務。整個文件相對較大，由於它做爲路由的渲染，不會被複用，所以也不會對外提供接口；在項目開發中，咱們寫的大部分代碼都是這類的組件（頁面），協同開發時，每人維護本身的頁面，不多有交集。這類組件相對是最好寫的，由於主要是還原設計稿，完成需求，不須要太多模塊和架構設計上的考慮；
不包含業務，獨立、具體功能的==基礎組件==，好比日期選擇器、模態框等。這類組件做爲項目的基礎控件，會被大量使用，所以組件的 API 進行太高強度的抽象，能夠經過不一樣配置實現不一樣的功能；
==業務組件==。它不像第二類獨立組件只包含某個功能，而是在業務中被多個頁面複用的，它與獨立組件的區別是，業務組件只在當前項目中會用到，不具備通用性，並且會包含一些業務，好比數據請求；而獨立組件不含業務，在任何項目中均可以使用，功能單一，好比一個具備自定義數據校驗功能的輸入框。

vue組件的三個API：prop、event、slot

一個組件的複雜與否，都是由三部分組成的，==prop（屬性）==，==event（事件）==，==slot（插槽）==，必需要先設計好這三部分，才能繼續開發組件，不然，代碼一旦發佈，後面再修改API就很困難了，組件的維護都是以新增功能爲主，而不是常常變動接口；vue-router

prop（屬性）

prop 定義了這個組件有哪些可配置的屬性，組件的核心功能也都是它來肯定的。寫通用組件時，props 最好用對象的寫法，這樣能夠針對每一個屬性設置類型、默認值或自定義校驗屬性的值，這點在組件開發中很重要，然而不少人卻忽視，直接使用 props 的數組用法，這樣的組件每每是不嚴謹的。編程

例如：收銀端的打印彈框組件（部分代碼已簡略）數組

<template>
  <!--打印-->
  <el-dialog
    :show-close="false"
    :visible="visiable"
    :closeOnClickModal="false"
    custom-class="zbe-dialog chose-sale"
    width="1000px"
    center
  >
    <p slot="title" class="zbe-dialog-title">打印單據</p>
    <div class="box">
      <el-row style="margin-top:10px">
        <el-col :span="24" v-if="!web_view_error" v-loading="loading">
          <!-- 預覽窗口 -->
          <webview
            ref="view"
            id="view"
            :src="visiable?data_web_view_url:' '"
            autosize
            plugins
            disablewebsecurity
            allowpopups
            style="display:inline-flex; width:100%;height:400px;"
          ></webview>
        </el-col>
        <!-- 打印加載失敗提示 -->
        <el-col :span="24" v-if="web_view_error&&!loading">打印加載失敗</el-col>
      </el-row>
      <!-- 關閉按鈕 -->
      <el-row>
        <el-col :span="11" :offset="20" style="margin-top:20px">
          <el-button @click="doCancle">關閉</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "print",
  props: {
    // 控制組件的顯示隱藏
    show: {
      type: Boolean,
      default: false
    },
    // 打印URL
    web_view_url: "",
    // 關閉打印後的跳轉地址
    web_view_reback_path: "",
    // 是否打印加載失敗
    web_view_error: false
  },
  data() {
    return {
      visiable: false,
      domReady: true,
      data_web_view_url: "/",
      loading: false
    };
  },
  methods: {
    // 關閉後跳到傳過來的path
    doCancle() {
      this.$emit("dailog-close", "printDialogVisible");
      this.$router.push({ name: this.web_view_reback_path });
    }
  },
  watch: {
    show(item) {
      this.visiable = item;
    },
    web_view_url(newValue, oldValue) {
      this.loading = true;
      this.data_web_view_url = "/";
      setTimeout(() => {
        this.data_web_view_url = newValue;
      }, 200);
      this.loading = false;
    },
  }
};
</script>
複製代碼

組件中定義了4個prop，分別是==show==（控制組件的顯示隱藏），==web_view_url==（打印URL），==web_view_reback_path==（關閉打印後的跳轉地址），==web_view_error==（是否打印加載失敗）緩存

值得注意的是，組件裏定義的prop都是單向數據流，只能經過父級組件對齊進行修改，組件自己不能修改props的值，只能修改定義在data裏的數據，非要修改，也是經過後面介紹的自定義事件通知父級，由父級來修改；bash

solt（插槽）

先看下代碼前端框架

<template>
  <button>
    <slot name="icon"></slot>
    <slot></slot>
  </button>
</template>
複製代碼

這裏的節點就是指定的一個插槽的位置，這樣在組件內部就能夠擴展內容了；

<i-button>
  <i-icon slot="icon" type="checkmark"></i-icon>
  按鈕 1
</i-button>
複製代碼

這樣，父級內定義的內容，就會出如今組件對應的 slot 裏，沒有寫名字的，就是默認的 slot；

event（事件）

仍是先看代碼

<template>
  <button @click="handleClick">
    <slot></slot>
  </button>
</template>
<script>
  export default {
    methods: {
      handleClick (event) {
        this.$emit('on-click', event);
      }
    }
  }
</script>
複製代碼

在組件中能夠經過$emit觸發自定義事件on-click，在父組件經過@on-click來監聽

<i-button @on-click="handleClick"></i-button>
複製代碼

組件之間的通訊方式

Vue 的組件做用域都是孤立的，不容許在子組件的模板內直接引用父組件的數據。必須使用特定的方法才能實現組件之間的數據傳遞

一、父子組件之間的通訊方式

父組件向子組件的通訊方式能夠經過props傳遞：若是須要從父組件獲取 username 的值，就須要

props:{
   username:{
        
   }
}
複製代碼

子組件向父組件傳遞數據則能夠經過event傳遞：

methods:{
    handelSwitch(index){
      this.actIndex=index;
      this.$emit("transferTabIndex",this.actIndex)
    }
  }
複製代碼

二、非父子組件之間的通訊方式：eventBus

eventBus這種通訊方式,針對的是非父子組件之間的通訊,它的原理仍是經過事件的觸發和監聽；

可是由於是非父子組件的關係,他們須要有一箇中間組件來鏈接；

我是使用的經過在根組件,也就是#app組件上定義了一個全部組件均可以訪問到的組件,具體使用方式以下；

使用eventBus傳遞數據,咱們一共須要作3件事情

1.給app組件添加Bus屬性 (這樣全部組件均可以經過this.$root.Bus訪問到它,並且不須要引入任何文件)；
2.在組件1裏,this.emit觸發事件；
3.在組件2裏,this.on監聽事件；

三、利用本地化緩存機制

這種通訊比較簡單,缺點是數據和狀態比較混亂,不太容易維護；

經過window.localStorage.getItem(key) 獲取數據；經過window.localStorage.setItem(key,value) 存儲數據；

注意用JSON.parse() / JSON.stringify() 作數據格式轉換；

實例講解：銖寶益幫助中心前端組件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。