Vue-use Specifies the detailed usage

Add plug-in global functionality

1. Add global methods or properties
2. Add global resources: directives/filters/transitions, etc
3. Add some component options through global blending
4. Add Vue instance methods by adding them toVue.prototypeImplemented on
5. A library that provides its own API and provides one or more of the functions mentioned above

Add global methods

let myPlugin = {};
myPlugin.install = function (Vue, options) {
    Vue.myPluginMethods = function () {
        console.log(Vue, options, 'Global method')}}export default myPlugin

/ / the main used in js
Vue.use(myPlugin)
Vue.myPluginMethods()
Copy the code

Add an instance of Vue

let myPlugin = {
}
myPlugin.install = function (Vue, options) {
    Vue.prototype.$myPluginMethods = function () {
        window.confirm('Global method')}}export default myPlugin

// used in the component
<template>
  <button @click="$myPluginMethods()">Use global method</button>
</template>
Copy the code

Instruction binding

let myPlugin = {}
myPlugin.install = function (Vue, options) {
    Vue.directive('my-direactive', {
        bind() {
            console.log('Directive binding')}}}export default myPlugin

// used in the component
<template>
    <div v-my-direactive="">12</div>
</template
Copy the code

With global

let myPlugin = {}
myPlugin.install = function (Vue, options) {
    Vue.mixin({
        // All components are initialized to execute
        created() {
            console.log('with')},methods: {
            textMixins() {
                alert(2)}}})}export default myPlugin

// used in the component
<template>
 	<div @click="textMixins()">mixin</div>
</template
Copy the code

Global components

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

// used in the component
<template>
 	<customTemplateAll />
</template
Copy the code