本身封裝 vue 組件 和 插件

vue 組件

1、組件的建立，兩種方法。(本質上是一、2兩種，vue文件，只是生成了一個建立組件須要的 option對象)
一、定義組件：Vue.component('button-counter',{})。這種方法建立的組件，只能使用在父組件中，沒法使用在插件中。由於在不掛載組件時，沒法獲取到組件對象。

Vue.component('my-component',{ 
            template : '<h3>這是使用 Vue.component 建立的組件</h3>',
            data(){
                return {}
            },
            methods: {
            }
})

二、經過Vue.extend({}) ，再實例化一個組件出來。 https://www.w3cplus.com/vue/vue-extend.html

let baseExtend = Vue.extend({
    template: `<p> {{ firstName }} {{ lastName }} aka {{ alias }}</p>`,
    data() {
        return {
            firstName: '大漠',
            lastName: 'w3cplus',
            alias: '大漠_w3cplus'
        }
    },
    created() {
        console.log('onCreated-1');
    }
})

new baseExtend() // 實例化一個組件

 

三、vue文件（這個其實沒有建立組件）：vue文件的組件，其它的地方使用，必定要先導入，導入得到的只是一個有關這個組件的option對象，還不是一個組件(應該就是1和2中參數中的對象)。
　  要使用這個組件，還須要把這個option對象注入到組件中。（我猜使用Vue.extend應該也是能夠的）

2、組件的使用：https://blog.csdn.net/WU5229485/article/details/82908068
一、組件在父組件的使用，只要組件註冊（我的理解，就是建立一個掛載這個組件的標籤）到父組件中就可使用。固然，全局使用就全局註冊。
二、組件在插件中的使用，必需要獲取到這個組件對象才能使用。由於組件在插件中使用是不須要生成掛載標籤的。通常是經過手動掛載的。

3、獲取組件實例：
一、Vue.component註冊的組件，必須在使用組件的時候，經過$refs屬性得到。沒法直接在沒有掛載組件時，獲取組件實例。
二、Vue.extend 獲取組件實例很簡單，直接new一個實例出來就能夠了。插件中須要組件實例，都是用這種方式獲取到的。

---

 vue 插件

一、vue 插件 格式：

var MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  Vue.myGlobalMethod = function () {  // 1. 添加全局方法或屬性，如: vue-custom-element
    // 邏輯...
  }
  Vue.directive('my-directive', {  // 2. 添加全局資源：指令/過濾器/過渡等，如 vue-touch
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })
  Vue.mixin({
    created: function () {  // 3. 經過全局 mixin方法添加一些組件選項，如: vuex
      // 邏輯...
    }
    ...
  })
  Vue.prototype.$myMethod = function (options) {  // 4. 添加實例方法，經過把它們添加到 Vue.prototype 上實現
    // 邏輯...
  }
}

二、純 js （不須要顯示 html 標籤）的插件很簡單，很好開發。

// MyPlugin.js
var MyPlugin = {}
MyPlugin.install = function (Vue, option) {
  Vue.prototype.$msg = 'hello'
}

export default MyPlugin // 注意，vue 中導出一個對象都是使用 export default，由於其它的導出和 import混用，可能會出現報錯的問題。

// main.js
import MyPlugin from './Plugins/MyPlugin'
Vue.use(MyPlugin)  // 這一步的做用是自動 調用插件裏面的install方法，同時把Vue和option兩個參數傳遞進去

// 使用的頁面中
console.log(this.$msg)

三、須要顯示 內容（即須要html標籤顯示的）的插件開發。如：Toast 插件 的開發  http://www.javashuo.com/article/p-gepbpwfc-dg.html

// Toast.js
var MyPlugin = {}
MyPlugin.install = function (Vue, option) {
  Vue.prototype.$Toast = (tips) => {
    let ToastTpl = Vue.extend({ // 一、建立構造器，定義好提示信息的模板
      template: '<div class="vue-toast">' + tips + '</div>'
    })
    let tpl = new ToastTpl().$mount().$el // 二、建立實例，在文檔以外渲染成
    document.body.appendChild(tpl) // 三、把建立的實例添加到body中
    setTimeout(function () { // 四、延遲2.5秒後移除該提示
      document.body.removeChild(tpl)
    }, 2500)
  }
}

export default MyPlugin // 注意，vue 中導出一個對象都是使用 export default，由於其它的導出和 import混用，可能會出現報錯的問題。

// main.js
import MyPlugin from './Plugins/MyPlugin'
Vue.use(MyPlugin)  // 這一步的做用是自動 調用插件裏面的install方法，同時把Vue和option兩個參數傳遞進去

// 使用的頁面中
this.$Toast('Global') 

四、使用vue文件，做爲組件的插件。https://blog.csdn.net/Wbiokr/article/details/78881308

// toast.vue
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
  data () {
    return {
      msg: ''
    }
  }
}
</script>

// toast.js
import toast from './toast.vue'

var plugin = {}
plugin.install = (Vue, option) => {
  Vue.prototype.$toast = (msg) => {
    var ToastClass = Vue.extend(toast)
    var ToastCom = new ToastClass()
    ToastCom.msg = msg
    var Dom = ToastCom .$mount().$el
    document.body.appendChild(Dom)
  }
}

export default plugin

this.$toast('數據')

五、本身寫一個圖片放大瀏覽的插件：

 

 

 

涉及的概念：

　　a、組件構造器 （Vue.extend），再組件實例化。  https://cn.vuejs.org/v2/api/#Vue-extend（官網）

　　b、組件名.$mount()：手動將組件掛載到DOM 中 （和Vue初始化的el屬性是同樣的功能）。     https://cn.vuejs.org/v2/api/#vm-mount（官網）

 　   c、組件的 $el 屬性：獲取相應 vue（或組件）實例渲染（$mount方法沒有參數，就有渲染成DOM功能）後的DOM對象。  https://cn.vuejs.org/v2/api/#vm-el （官網）

 

總結：（我的）插件不必定非得使用Vue.use（install）的方法開發，直接寫一個方法也是能夠的。而後把這個方法掛載Vue實例上就能夠了（官方推薦使用Vue.use這種方法）。

　　　須要組件的插件，難點在於，生成組件，而且把組件的標籤手動掛載在DOM上。

 

 

---

4、Vue.component(el,{}) 和 Vue.extend({})有什麼區別 https://www.cnblogs.com/battle-wang/p/9673577.html一、Vue.component 做用是將組件註冊到掛載標籤el上。Vue.extend({})建立的組件類，須要使用vue.component進行實例化、或使用new extendName().$mount(''+el)方式進行實例化（從而實現模擬組件）