四种编写Vue插件的实际案例

1.使用Vue.extend()+vm.$mount()

Vue.extend()是一个全局API。
用法:
使用基础Vue构造器，建立一个"子类"。参数是一个包含组件选项的对象。
data选择是特例，须要注意，在Vue.extend()中它必须是函数。

<div id="mount-point"></div>
复制代码

// 建立构造器
var Profile = Vue.extend({
    template: '<p>{{firstName}} {{lastName}} aka {{alias}} </p>',
    data: function () {
        return {
            firstName: 'a',
            lastName: 'b',
            alias: 'c'
        }
    }
})
// 建立Profile实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
复制代码

结果：

<p>a b aka c</p>
复制代码

(1) 实际案例：

用Vue CLI 3初始化一个Vue的项目

初始化一个新项目：
vue create vue-plugin-demo

? Please pick a preset:Manually select features
? Check the features needed for your project:
选择Babel, Router, Vuex
不须要Linter / Formatter
? Use history mode for router? Y
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?  In dedicated config files
? Save this as a preset for future project? N

初始化项目以后：

cd vue-plugin-demo
npm run serve
复制代码

在src/components目录，新建SayHello.vue组件：

SayHello.vue:

<template>
    <div class="Hello-box" v-show="show">
        <p>Hello</p>
        <h1>{{text}}</h1>
    </div>
</template>
<script>
export default {
    props: {
        show: Boolean,
        text: {
            type: String,
            default: 'success'
        }
    }
}
</script>

<style>
p {
    font-size: 28px;
    text-align: center;
}
h1 {
    text-align: center;
}
</style>
复制代码

而后，在src/components目录，新建SayHello.js 插件。

SayHello.js:

// .js 结尾的是插件
// .vue结尾的是组件
// 插件能够对组件进行封装 
import SayHello from './SayHello.vue'
let $vm

export default {
    install (Vue, options) {
        if (!$vm) {
            // Vue.extend()的做用
            const SayHelloPlugin = Vue.extend(SayHello)

            $vm = new SayHelloPlugin({
                el: document.createElement('div')
            })
            document.body.appendChild($vm.$el)
        }
        $vm.show = false 

        let sayhellofn = {
            show(text) {
                $vm.show = true 
                $vm.text = text 
            },
            hide(){
                $vm.show = false
            }
        }

        if (!Vue.$say) {
            Vue.$say = sayhellofn  // 添加全局的方法
        }
    }
}
复制代码

而后，在App.vue中，使用SayHello.js这个插件。

App.vue:

<template>
  <div id="app">
  
  </div>
</template>

<script>
import SayHello from './components/SayHello.js'
import Vue from 'vue'

// Vue.use()是用来注册一个全局插件的
// 让每一个组件，均可以使用这个插件
Vue.use(SayHello)  
export default {
  name: 'App',
  mounted() {
    Vue.$say.show('Friend')
  }
}
</script>
复制代码

结果：

Hello
Friend
复制代码

总结：

第一种编写Vue插件的方法：

// 1.添加全局方法或属性
Vue.$pluginName = function(){
    // 逻辑
}
复制代码

2.添加全局资源, Vue.directive()

添加全局资源包含了添加全局的指令/过滤器/过渡等，这种方式经过Vue.directive实现。假如咱们有一个focus插件，它获取某个元素的焦点，则能够经过如下方式实现：

// 2.添加全局资源
Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {
        // 逻辑
    }
})
复制代码

(1) 实际案例：

先用Vue CLI 3初始化一个Vue的项目。

在src/components目录，新建 focus.js 插件。

focus.js:

// focus.js
export default {
    install(Vue, options) {
        // 添加全局资源,添加全局指令
        Vue.directive('focus', {
            bind: function (){},

            // 当绑定元素插入到DOM中
            inserted: function (el, binding, vnode, oldVnode) {
                // 聚焦元素
                el.focus();
                alert(1);
            },
            update: function (){},
            componentUpdated: function (){},
            unbind: function (){}
        });
    },
}
复制代码

在App.vue中使用 focus.js 插件：

App.vue:

<template>
    <div id="app">
        <input v-focus>
    </div>
</template>
<script>
import Focus from './components/focus.js'
Vue.use(Focus)
</script>
复制代码

这样，在input挂载在DOM中时，便会自动获取焦点。
Vue.directive()包括5个函数，分别在不一样的生命周期阶段调用。

Vue.directive()包含5个钩子函数。
一个指令定义对象能够提供以下几个钩子函数(均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不必定已被插入文档中）。
• update： 所在组件的VNode更新时调用，可是可能发生在其子VNode更新以前。指令的值可能发生了改变，也可能没有。可是你能够经过比较更新先后的值来忽略没必要要的模板更新（详细的钩子函数参数见下）。
• componentUpdated： 指令所在组件的VNode及其子VNode所有更新后调用。
• unbind： 只调用一次，指令与元素解绑时调用。

若是想注册局部指令，组件中也接受一个 directives 的选项。
是在组件中，注册的局部指令。

directives: {
    focus: {
        // 指令的定义
        inserted: function (el) {
            el.focus()
        }
    }
}
复制代码

而后你能够在当前组件的模板中任何元素上使用新的 v-focus 属性，以下：

<input v-focus>
复制代码

3.注入组件，Vue.mixin()

这一种方式的实现能够经过调用 Vue.mixin。 混合(mixins) 是一种分发Vue组件中可复用功能的很是灵活的方式。混合对象能够包含任意组件选项。当组件

// 3.注入组件
Vue.mixin({
    created: function (){
        // 逻辑
    }
})
复制代码

4.添加实例方法

// 4.添加实例方法
Vue.prototype.$myMethod = function(methodOptions){
    // 逻辑
}
复制代码