Vue define varias formas de variables globales y componentes globales

1.Ver.prototipo

Vue.prototype.$axios = axios    
//this.$axios

2.Vue.use ()

//在使用 element时会先import,再Vue.use()一下,实际上就是注册组件,触发 install 方法;
Vue.use(Element)
window.$ = require("jquery")   //挂载在window上

3.View.directive ()

//防止按钮重复点击,全局使用 v-preventClick
Vue.directive('preventClick', {
    
    
    inserted (el, binding) {
    
    
        el.addEventListener('click', () => {
    
    
           if (!el.disabled) {
    
    
               el.disabled = true
               setTimeout(() => {
    
    
                  el.disabled = false
               }, 3000)
            }
        })
    }
})

4.View.component ()

Los componentes globales se basan en componentes ordinarios, simplemente cree componentes ordinarios en DOM

//dragResize.js
import VueDragResize from 'vue-drag-resize'
export default {
    
    
  install() {
    
    
    Vue.component("VueDragResize",VueDragResize)
  }
};
//main.js
import VueDragResize from './utils/dragResize.js'
Vue.use(VueDragResize) 


//需要导入多个组件
const requireComponent = require.context('./components', false, /\.(vue|js)$/)
requireComponent.keys().forEach((fileName) => {
    
    
  // 获取组件配置
  const componentConfig = requireComponent(fileName)
  const componentName = fileName.split('/').pop().split(".")[0]
  // 全局注册组件
  Vue.component(componentName, componentConfig.default)
})
//说明
require.context(directory,useSubdirectories,regExp)
接收三个参数:
directory：说明需要检索的目录
useSubdirectories：是否检索子目录
regExp: 匹配文件的正则表达式,一般是文件名

5.View.extend ()

Algunos de los componentes de vue necesitan montar algunos elementos en los elementos. En este momento, extender funcionará.
Use Vue.extend () para construir una instancia de subclase de Vue, luego llame al método mount () para generar el DOM requerido, y luego get it La instancia el correspondiente se inserta en el DOM

import Vue from 'vue'
const toastMessage = Vue.extend({
    
    
  template: '<div>{
    
    { text }}</div>',
  data: function () {
    
    
    return {
    
    
      text: '发信息来啦'
    }
  }
})
const message = new toastMessage().$mount()
document.body.appendChild(message.$el)

6.Ver.filtro ()

El valor en la expresión de diferencia se pasa de izquierda a derecha, el valor anterior se pasará a la parte posterior como parámetro y están separados por un carácter de barra vertical

<div id="app">
    <p>{
   
   {price | addPriceIcon | editPrice}}</p>
</div>

 let vm = new Vue({
    
    
    el:"#app",
    data:{
    
    
        price:200
    },
    filters:{
    
    
        addPriceIcon(value){
    
    
            return '¥' + value
        },
        editPrice(value){
    
    
          console.log(value)
          return "吃饭：" + value
        }
    }
 })

¿Cómo usarlo de manera diferente?

Creo que mucha gente usará Vue.use () cuando use componentes de otras personas con Vue. Por ejemplo: Vue.use (VueRouter), Vue.use (MintUI). Pero cuando usa axios, no necesita usar Vue.use (axios), puede usarlo directamente. Entonces, ¿por qué es esto?
Porque axios no usa el método de instalación

export default {
    
    
  install(Vue) {
    
    
    Vue.prototype.$get = (url, params = {
    
    }) => {
    
    
      return new Promise((resolve, reject) => {
    
    
        axios.get(url, params)
          .then(response => resolve(response.data))
          .catch(error => reject(error))
      })
    }
    Vue.prototype.$post = (url, params = {
    
    }) => {
    
    
      return new Promise((resolve, reject) => {
    
    
        axios.post(url, params)
          .then(response => resolve(response.data))
          .catch(error => reject(error))
      })
    }
  }
}