自己封裝 vue 組件 和 插件

vue 組件

一、組件的創建，兩種方法。(本質上是1、2兩種，vue文件，只是創建了一個  組件選項對象，僅是一個js對象)
1、定義組件：Vue.component('button-counter',{})。這種方法創建的組件，只能使用在父組件中，無法使用在插件中。因為在不掛載組件時，無法獲取到組件對象。

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

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

　  個人理解：Vue.extend() 方法 的 作用就是將一個 組件選項對象  變成一個 組件類。可以直接把 導入的 vue組件 ，作為 Vue.extend() 的參數。

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() // 實例化一個組件

 等同於：

// test.vue  （把上面的組件選項對象，寫入一個 vue文件中）
。。。

import test from './test.vue'  // 引入 一個vue組件文件

let baseExtend = Vue.extend(test)  // 這里通過打印test，發現test和上面的 Vue.extend()的參數屬性名不完全相同。但是通過 Vue.extend() 后是一樣。個人猜測 vue組件文件 導入 ，應該是webpack 做了某些處理了。不用去深究。

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

 

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

感悟：通過打印  import ToastComponent from './toast.vue'     console.log(ToastComponent)   發現  ToastComponent 中  template 屬性，但是里面有其它的屬性。

　　    vue文件是webpack才有的，直接 導入一個 vue文件，得到 一個 組件選項對象。雖然打印出來，和 直接寫的 組件選項不完全一樣。但是兩者其實是一樣的。應該是webpack對vue文件導入時做過處理，畢竟vue文件里還有css呢。

二、組件的使用：https://blog.csdn.net/WU5229485/article/details/82908068
1、組件在父組件的使用，只要組件注冊（個人理解，就是創建一個掛載這個組件的標簽）到父組件中就可以使用。當然，全局使用就全局注冊。
2、組件在插件中的使用，必須要獲取到這個組件對象才能使用。因為組件在插件中使用是不需要生成掛載標簽的。一般是通過手動掛載的。

三、獲取組件實例：
1、Vue.component注冊的組件，必須在使用組件的時候，通過$refs屬性獲得。無法直接在沒有掛載組件時，獲取組件實例。
2、Vue.extend 獲取組件實例很簡單，直接new一個實例出來就可以了。插件中需要組件實例，都是用這種方式獲取到的。

---

 vue 插件

1、vue 插件 格式：

　  說明：install方式的插件，其實就是方便把插件注冊到Vue對象上。就是把插件掛載在Vue對象下，這樣在其他的地方使用時，可以不用引入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 上實現
    // 邏輯...
  }
}

2、純 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)

3、需要顯示 內容（即需要html標簽顯示的）的插件開發。如：Toast 插件 的開發  https://www.cnblogs.com/linxin/p/6637904.html 或  https://www.cnblogs.com/DangerousBaymax/p/9116453.html（親測有效）

// Toast.js
var MyPlugin = {}
MyPlugin.install = function (Vue, option) {
  Vue.prototype.$Toast = (tips) => {
    let ToastTpl = Vue.extend({ // 1、創建構造器，定義好提示信息的模板
      template: '<div class="vue-toast">' + tips + '</div>'
    })
    let tpl = new ToastTpl().$mount().$el // 2、創建實例，在文檔之外渲染成
    document.body.appendChild(tpl) // 3、把創建的實例添加到body中
    setTimeout(function () { // 4、延遲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') 

4、使用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('數據')

5、自己寫一個圖片放大瀏覽的插件：

 

 

 

涉及的概念：

　　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上。

 

 

---

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