Vue組件開發實錄：組件的三種調用方式

時間  2019-11-30
標籤 vue 組件 開發 實錄 三種 調用 方式 简体版
原文   原文鏈接

本文首發於個人博客。歡迎點擊以得到更好的閱讀效果~javascript

以前在寫fj-service-system的時候，遇到了一些問題。那就是我有些組件，好比Dialog、Message這樣的組件，是引入三方組件庫，好比element-ui這樣的，仍是本身實現一個？雖然它們有按需引入的功能，可是總體風格和個人整個系統不搭。因而就能夠考慮本身手動實現這些簡單的組件了。html

一般咱們看Vue的一些文章的時候，咱們能看到的一般是講Vue單文件組件化開發頁面的。單一組件開發的文章相對就較少了。我在作fj-service-system項目的時候，發現其實單一組件開發也是頗有意思的。能夠寫寫記錄下來。由於寫的不是什麼ui框架，因此也只是一個記錄，沒有github倉庫，權且看代碼吧。vue

主要講三種方式調用組件：java

  • v-model或者.sync顯式控制組件顯示隱藏
  • 經過js代碼調用
  • 經過Vue指令調用

在寫組件的時候不少寫法、靈感來自於element-ui，感謝。git

Dialog

我習慣把這個東西叫作對話框，實際上還有叫作modal(彈窗)組件的叫法。其實就是在頁面裏，彈出一個小窗口，這個小窗口裏的內容能夠定製。一般能夠用來作登陸功能的對話框。github

dialog

這種組件就很適合經過v-model或者.sync的方式來顯式的控制出現和消失。它能夠直接寫在頁面裏，而後經過data去控制——這也是最符合Vue的設計思路的組件。element-ui

爲此咱們能夠寫一個組件就叫作Dialog.vueapi

<template>
  <div class="dialog">
    <div class="dialog__wrapper" v-if="visble" @clcik="closeModal">
      <div class="dialog">
        <div class="dialog__header">
          <div class="dialog__title">{{ title }}</div>
        </div>
        <div class="dialog__body">
          <slot></slot>
        </div>
        <div class="dialog__footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
    <div class="modal" v-show="visible"></div>
  </div>
</template>

<script> export default { name: 'dialog', props: { title: String, visible: { type: Boolean, default: false } }, methods: { close() { this.$emit('update:visible', false) // 傳遞關閉事件 }, closeModal(e) { if (this.visible) { document.querySelector('.dialog').contains(e.target) ? '' : this.close(); // 判斷點擊的落點在不在dialog對話框內，若是在對話框外就調用this.close()方法關閉對話框 } } } } </script>
複製代碼

CSS什麼的就不寫了，跟組件自己關係比較小。不過值得注意的是，上面的dialog__wrapper這個class也是全屏的，透明的，主要用於獲取點擊事件並鎖定點擊的位置，經過DOM的Node.contains()方法來判斷點擊的位置是否是dialog自己，若是是點擊到了dialog外面，好比半透明的modal層那麼就派發關閉事件，把dialog給關閉掉。app

當咱們在外部要調用的時候，就能夠以下調用：框架

<template>
  <div class="xxx">
    <dialog :visible.sync="visible"></dialog> 
    <button @click="openDialog"></button>
  </div>
</template>

<script> import Dialog from 'Dialog' export default { components: { Dialog }, data() { return { visible: false } }, methods: { openDialog() { this.visible = true // 經過data顯式控制dialog } } } </script>
複製代碼

爲了Dialog開啓和關閉好看點，你可試着加上<transition></transition>組件配合上過渡效果，簡單的一點過渡動效也將會很好看。

Notice

這個組件相似於element-ui的message（消息提示）。它吸引個人最大的地方在於，它不是經過顯式的在頁面裏寫好組件的html結構經過v-model去調用的，而是經過在js裏經過形如this.$message()這樣的方法調用的。這種方法雖然跟Vue的數據驅動的思想有所違背。不過不得不說在某些狀況下真的特別方便。

notice

對於Notice這種組件，一次只要提示幾個文字，給用戶簡單的消息提示就好了。提示的信息多是多變的，甚至能夠出現疊加的提示。若是經過第一種方式去調用，事先就得寫好html結構，這無疑是麻煩的作法，並且沒法預知有多少消息提示框。而經過js的方法調用的話，只須要考慮不一樣狀況調用的文字、類型不一樣就能夠了。

而以前的作法都是寫一個Vue文件，而後經過components屬性引入頁面，顯式寫入標籤調用的。那麼如何將組件經過js的方法去調用呢？

這裏的關鍵是Vue的extend方法。

文檔裏並無詳細給出extend能這麼用，只是做爲須要手動mount的一個Vue的組件構造器說明了一下而已。

經過查看element-ui的源碼，纔算是理解了如何實現上述的功能。

首先依然是建立一個Notice.vue的文件

<template>
  <div class="notice">
    <div class="content">
      {{ content }}
    </div>
  </div>
</template>

<script> export default { name: 'notice', data () { return { visible: false, content: '', duration: 3000 } }, methods: { setTimer() { setTimeout(() => { this.close() // 3000ms以後調用關閉方法 }, this.duration) }, close() { this.visible = false setTimeout(() => { this.$destroy(true) this.$el.parentNode.removeChild(this.$el) // 從DOM裏將這個組件移除 }, 500) } }, mounted() { this.setTimer() // 掛載的時候就開始計時，3000ms後消失 } } </script>
複製代碼

上面寫的東西跟普通的一個單文件Vue組件沒有什麼太大的區別。不過區別就在於，沒有props了，那麼是如何經過外部來控制這個組件的顯隱呢？

因此還須要一個js文件來接管這個組件，並調用extend方法。同目錄下能夠建立一個index.js的文件。

import Vue from 'vue'

const NoticeConstructor = Vue.extend(require('./Notice.vue').default) // 直接將Vue組件做爲Vue.extend的參數。新版vue-loader升級後要求加上`.default`，感謝評論指出~

let nId = 1

const Notice = (content) => {
  let id = 'notice-' + nId++

  const NoticeInstance = new NoticeConstructor({
    data: {
      content: content
    }
  }) // 實例化一個帶有content內容的Notice

  NoticeInstance.id = id
  NoticeInstance.vm = NoticeInstance.$mount() // 掛載可是並未插入dom，是一個完整的Vue實例
  NoticeInstance.vm.visible = true
  NoticeInstance.dom = NoticeInstance.vm.$el
  document.body.appendChild(NoticeInstance.dom) // 將dom插入body
  NoticeInstance.dom.style.zIndex = nId + 1001 // 後插入的Notice組件z-index加一，保證能蓋在以前的上面
  return NoticeInstance.vm
}

export default {
  install: Vue => {
    Vue.prototype.$notice = Notice // 將Notice組件暴露出去，並掛載在Vue的prototype上
  }
}
複製代碼

這個文件裏咱們能看到經過NoticeConstructor咱們可以經過js的方式去控制一個組件的各類屬性。最後咱們把它註冊進Vue的prototype上，這樣咱們就能夠在頁面內部使用形如this.$notice()方法了，能夠方便調用這個組件來寫作出簡單的通知提示效果了。

固然別忘了這個至關於一個Vue的插件，因此須要去主js裏調用一下Vue.use()方法：

// main.js

// ...
import Notice from 'notice/index.js'

Vue.use(Notice)

// ...

複製代碼

Loading

在看element-ui的時候，我也發現了一個頗有意思的組件，是Loading，用於給一些須要加載數據等待的組件套上一層加載中的樣式的。這個loading的調用方式，最方便的就是經過v-loading這個指令，經過賦值的true/false來控制Loading層的顯隱。這樣的調用方法固然也是很方便的。並且能夠選擇整個頁面Loading或者某個組件Loading。這樣的開發體驗天然是很好的。

loading

其實跟Notice的思路差很少，不過由於涉及到directive，因此在邏輯上會相對複雜一點。

平時若是不涉及Vue的directive的開發，多是不會接觸到modifiers、binding等概念。參考文檔

簡單說下，形如:v-loading.fullscreen="true"這句話，v-loading就是directive，fullscreen就是它的modifier，true就是binding的value值。因此，就是經過這樣簡單的一句話實現全屏的loading效果，而且當沒有fullscreen修飾符的時候就是對擁有該指令的元素進行loading效果。組件經過binding的value值來控制loading的開啓和關閉。（相似於v-model的效果）

其實loading也是一個實際的DOM節點，只不過要把它作成一個方便的指令還不是特別容易。

首先咱們須要寫一下loading的Vue組件。新建一個Loading.vue文件

<template>
  <transition name="loading" @after-leave="handleAfterLeave">
    <div v-show="visible" class="loading-mask" :class={'fullscreen': fullscreen}>
      <div class="loading">
        ...
      </div>
      <div class="loading-text" v-if="text">
        {{ text }}
      </div>
    </div>
  </transition>
</template>
<script> export default { name: 'loading', data () { return { visible: true, fullscreen: true, text: null } }, methods: { handleAfterLeave() { this.$emit('after-leave'); } } } </script>
<style> .loading-mask{ position: absolute; // 非全屏模式下，position是absolute z-index: 10000; background-color: rgba(255,235,215, .8); margin: 0; top: 0; right: 0; bottom: 0; left: 0; transition: opacity .3s; } .loading-mask.fullscreen{ position: fixed; // 全屏模式下，position是fixed } // ... </style>
複製代碼

Loading關鍵是實現兩個效果：

  1. 全屏loading，此時能夠經過插入body下，而後將Loading的position改成fixed，插入body實現。
  2. 對所在的元素進行loading，此時須要對當前這個元素的的position修改：若是不是absolute的話，就將其修改成relatvie，並插入當前元素下。此時Loading的position就會相對於當前元素進行絕對定位了。

因此在當前目錄下建立一個index.js的文件，用來聲明咱們的directive的邏輯。

import Vue from 'vue'
const LoadingConstructor = Vue.extend(require('./Loading.vue').default) // 新版vue-loader升級後要求加上`.default`，感謝評論指出~

export default {
  install: Vue => {
    Vue.directive('loading', { // 指令的關鍵
      bind: (el, binding) => {
        const loading = new LoadingConstructor({ // 實例化一個loading
          el: document.createElement('div'),
          data: {
            text: el.getAttribute('loading-text'), // 經過loading-text屬性獲取loading的文字
            fullscreen: !!binding.modifiers.fullscreen 
          }
        })
        el.instance = loading; // el.instance是個Vue實例
        el.loading = loading.$el; // el.loading的DOM元素是loading.$el
        el.loadingStyle = {};
        toggleLoading(el, binding);
      },
      update: (el, binding) => {
        el.instance.setText(el.getAttribute('loading-text'))
        if(binding.oldValue !== binding.value) {
          toggleLoading(el, binding)
        }   
      },
      unbind: (el, binding) => { // 解綁
        if(el.domInserted) {
          if(binding.modifiers.fullscreen) {
              document.body.removeChild(el.loading);
          }else {
            el.loading &&
            el.loading.parentNode &&
            el.loading.parentNode.removeChild(el.loading);
          }
        }
      }
    })

    const toggleLoading = (el, binding) => { // 用於控制Loading的出現與消失
      if(binding.value) { 
        Vue.nextTick(() => {
          if (binding.modifiers.fullscreen) { // 若是是全屏
            el.originalPosition = document.body.style.position;
            el.originalOverflow = document.body.style.overflow;
            insertDom(document.body, el, binding); // 插入dom
          } else {
            el.originalPosition = el.style.position;
            insertDom(el, el, binding); // 若是非全屏，插入元素自身
          }
        })
      } else {
        if (el.domVisible) {
          el.instance.$on('after-leave', () => {
            el.domVisible = false;
            if (binding.modifiers.fullscreen && el.originalOverflow !== 'hidden') {
              document.body.style.overflow = el.originalOverflow;
            }
            if (binding.modifiers.fullscreen) {
              document.body.style.position = el.originalPosition;
            } else {
              el.style.position = el.originalPosition;
            }
          });
          el.instance.visible = false;
        }
      }
    }

    const insertDom = (parent, el, binding) => { // 插入dom的邏輯
      if(!el.domVisible) {
        Object.keys(el.loadingStyle).forEach(property => {
          el.loading.style[property] = el.loadingStyle[property];
        });
        if(el.originalPosition !== 'absolute') {
          parent.style.position = 'relative'
        }
        if (binding.modifiers.fullscreen) {
          parent.style.overflow = 'hidden'
        }
        el.domVisible = true;
        parent.appendChild(el.loading) // 插入的是el.loading而不是el自己
        Vue.nextTick(() => {
          el.instance.visible = true;
        });
        el.domInserted = true;
      }
    }
  }
}
複製代碼

一樣，寫完整個邏輯，咱們須要將其註冊到項目裏的Vue下：

// main.js

// ...
import Loading from 'loading/index.js'

Vue.use(Loading)

// ...
複製代碼

至此咱們已經可使用形如

<div v-loading.fullscreen="loading" loading-text="正在加載中">
複製代碼

這樣的方式來實現調用一個loading組件了。

總結

在用Vue寫咱們的項目的時候，不論是寫頁面仍是寫形如這樣的功能型組件，其實都是一件頗有意思的事情。本文介紹的三種調用組件的方式，也是根據實際狀況出發而實際操做、實現的。不一樣的組件經過不一樣的方式去調用，方便了開發人員，也能更好地對代碼進行維護。固然也許還有其餘的方式，我並無瞭解，也歡迎你們在評論裏指出！

最後再次感謝element-ui的源碼給予的極大啓發。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程