javascript - vue 寫一個元件和寫一個外掛有什麼不同？

Question

現在想寫一個分頁的東西，但是拿不定是寫成一個.vue單文件好還是用install寫成一個插件好，不太清楚2者之間的區別，感覺.vue就能解決需求，但是為什麼要有install這個方式呢，另外還有一個關於install寫入外掛的問題

//pagetion的模版
    <template>
      <p class="paging">
        <p name="pagingPage">
          <li>
            <span class="paging-first"></span>
          </li>
          <li v-for="item in numArr">
            <span class="paging-next">{{item}}</span>
          </li>
          <li>
            <span class="paging-last"></span>
          </li>
        </p>
       </p>
    </template>
    

    //这个是install写插件
    let paging = {
      install: function(Vue, options) {
        Vue.component('pagination',pagination);
      }
    }
    
    

我install裡面的options設定參數如何傳遞到pagetion的模版裡面去呢？

Answer 1

Vue 的元件是模板和 UI 邏輯的結合。

如果分頁邏輯在許多元件之間需要重複使用，那麼最好的方式顯然是透過外掛程式重複使用 Vue 檔案的 JS 邏輯。

如果分頁邏輯只在一個元件中使用到，那麼使用外掛程式和 mixins 會降低單一 Vue 元件的可讀性。

Answer 2

一個Vue插件可以是一堆Vue元件的集合（插件乾的事就是把內部的元件幫你倒入vue全域下），也可以是用來擴充Vue功能的，像是 Vuex， Vue-Router。你也可以寫一個插件，在Vue原型上擴充方法，要實現這個需求絕對沒辦法寫成元件。

 let whatever = {
      install: function(Vue, options) {
        Vue.prototype.$whatever = function(){
          // do something 
        };
      }
    }
    
// 你这个用组件咋搞？

另外，你為啥要在install插件的時候決定插件倒入的組件的資料呢？那不是應該你在用這個元件的時候透過props來控制麼？