Vue 相关Api

Vue.prototype.xx

作用：挂载全局方法
使用场景一：将自定义函数或方法进行全局挂载，方便全局使用。
xx.js（公共方法或者api请求方法）

export function getData(param1) {

}

main.js

import { getData } from "@/xx/xx";
Vue.prototype.getData = getData;

xx.vue

this.getData(param1)

使用场景二：结合Vue.Use安装自定义插件并将插件中的方法挂载全局
plugins→modal.js

import { Message} from 'element-ui'

export default {
  // 消息提示
  msg(content) {
    Message.info(content)
  },
  // 错误消息
  msgError(content) {
    Message.error(content)
  },
  // 成功消息
  msgSuccess(content) {
    Message.success(content)
  },
  // 警告消息
  msgWarning(content) {
    Message.warning(content)
  }
}

plugins→index.js

import modal from './modal'

export default {
  install(Vue) {
    Vue.prototype.$modal = modal
  }
}

main.js

import plugins from './plugins' 
Vue.use(plugins)

xx.vue

this.$modal.msgSuccess("新增成功");

Vue.Use()

作用：安装插件、注册全局组件。
原理：调用插件对象或者函数的install方法，并将Vue作为参数传入。只需要调用一次vue.use，便可在所有组件中直接使用插件提供的功能。
参数：

• {Object | Function} plugin

1. 若参数是Object对象，则该对象必须提供一个 install 方法，install方法的参数就是Vue。该方法会被自动执行。
2. 若参数是Function函数，则该函数被当作是 install 方法，install方法调用时，会将Vue作为参数传入。

注意事项

1. 该方法需要在调用 new Vue() 之前被调用。
2. 有些组件调用时不需要使用Vue.Use，例如axios，是因为该组件内部没有 install 方法。

代码示例
plugins→index.js

const Plugin1 = {
  install(Vue, param) {
    console.log("方法第一个参数：", Vue);
    console.log("方法第二个参数：", param);
  },
};

function Plugin2(Vue, param) {
  console.log("函数第一个参数：", Vue);
  console.log("函数第二个参数：", param);
}

export { Plugin1, Plugin2 };

main.js

import {Plugin1,Plugin2} from './plugins/index'
Vue.use(Plugin1,'a')
Vue.use(Plugin2,'b')

效果图