本身封装 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)方式进行实例化（从而实现模拟组件）