首页创建一个文件夹包括一个vue文件和js文件。

vue文件为你需要的组件，如下：

<template>
  <v-snackbar v-model="open"
    color="white"
    :class="`${color}--text`"
    :timeout="timeout"
    top
    auto-height>
    <v-icon :color="color">{{icon}}</v-icon>
    {{ mes }}
  </v-snackbar>
</template>

<script>
export default {
  name: "Snackbar",
  props: {
    .......
  },
  components: {},
  data() {
    return {
      icon: "",
      color: "",
      open: this.snackbar,
      mes: this.message
    };
  },
  created() {},
  methods: {
    info(mes) {
      ......
    },
    error(mes) {
     ......
    },
    warning(mes) {
      ......
    },
    success(mes) {
      ......
    }
  }
};
</script>

<style lang='scss'>
.v-snack {
 .v-snack__content {
    justify-content: flex-start;
    i {
      margin-right: 10px;
    }
  }
}
</style>

在js文件中引用刚刚的Snackbar 组件及vue

import Snackbar from './Snackbar.vue'

import Vue from 'vue'

 

 创建模板并挂载

const v = new Vue({

render(createElement) {

return createElement(Snackbar);

}

})

v.$mount()

document.body.appendChild(v.$el);

 

 然后是你需要调用的方法,并暴露出去

const snackbar = v.$children[0];

function info(mes) {
  snackbar.info(mes);
}

function error(mes) {
  snackbar.error(mes);
}

function warning(mes) {
  snackbar.warning(mes);
}

function success(mes) {
  snackbar.success(mes);
}
export default {
  info,
  success,
  warning,
  error
}

 

最后在main.js文件引入

 

import snackbar from './components/snackbar/'

Vue.prototype.$snackbar = snackbar;

 

参考：vue组件挂载到全局方法的示例代码