vue-use详细使用

添加插件全局功能

1. 添加全局方法或者 属性
2. 添加全局资源：指令/过滤器/过渡等
3. 通过全局混入来添加一些组件选项
4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能

添加全局方法

let myPlugin = {};
myPlugin.install = function (Vue, options) {
    Vue.myPluginMethods = function () {
        console.log(Vue, options, '全局方法')
    }
}
export default myPlugin

//main.js中使用
Vue.use(myPlugin)
Vue.myPluginMethods()

添加Vue的实例

let myPlugin = {
}
myPlugin.install = function (Vue, options) {
    Vue.prototype.$myPluginMethods = function () {
        window.confirm('全局方法')
    }
}
export default myPlugin

//组件中使用
<template>
  <button @click="$myPluginMethods()">use全局方法</button>
</template>

指令绑定

let myPlugin = {}
myPlugin.install = function (Vue, options) {
    Vue.directive('my-direactive', {
        bind() {
            console.log('指令绑定')
        }
    })
}
export default myPlugin

//组件中使用
<template>
    <div v-my-direactive="">12</div>
</template

全局混入

let myPlugin = {}
myPlugin.install = function (Vue, options) {
    Vue.mixin({
        //所有组件初始化执行
        created() {
            console.log('混入')
        },
        methods: {
            textMixins() {
                alert(2)
            }
        }
    })
}
export default myPlugin

//组件中使用
<template>
 	<div @click="textMixins()">mixin</div>
</template

全局组件

import TemplateAll from '../components/vueUse/index2'
let myPlugin = {}
myPlugin.install = function (Vue, options) {
    Vue.component('customTemplateAll', TemplateAll)
}
export default myPlugin

//组件中使用
<template>
 	<customTemplateAll />
</template