I don't know if you think there are some global components when you use some UI frameworks, such as Element-ui. this.$message(),this.Toast(), and so on, are cool to use. Unlike other components, they need to be imported and registered. It's a lot of trouble.
Looking at the source code of Element, I also got one myself. Including plug-in knowledge that has not been touched before, alas, I feel that my understanding of Vue is not enough, just stay in the stage of use. More deep drilling is needed. Don't talk nonsense, go straight to the code.

Effect demonstration

The global component needs an index.js file to register

BlogMessage.vue

The script here is written in ts. You just need to make a few changes here.

<template>
  <transition name="slide">
    <div class="message-wrap" :class="type" v-if="visible">
      <div class="content">{{content}}</div>
    </div>
  </transition>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
  components: {}
})
export default class extends Vue {
  private content: string = "";
  private visible: boolean = false;
  private type: string = "info"; // 'success','error'
  private startTimer() {
    window.setTimeout(() => {
      this.visible = false;
    }, 3000);
  }
  private mounted() {
    this.startTimer();
  }
}
</script>
<style scoped lang="scss">
.message-wrap {
  position: fixed;
  background-color: #44b0f3;
  color: #ffffff;
  left: 40%;
  width: 20%;
  top: 25px;
  height: 40px;
  z-index: 1001;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #ebeef5;
  .content {
    line-height: 40px;
  }
}
.error {
  background-color: #fef0f0;
  color: #f56c6c;
}
.success {
  background-color: #f0f9eb;
  color: #67c23a;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>

index.js

import Vue from 'vue'
import BlogMessage from './BlogMessage.vue'
const MessageBox = Vue.extend(BlogMessage) // Create a component constructor, not an instance
const Message = {
  install: (options, type, duration) => {
    if (options === undefined || options === null) {
      options = {
        content: ''
      }
    } else if (typeof options === 'string' || typeof options === 'number') {
      options = {
        content: options
      }
      if (type != undefined && options != null) {
        options.type = type;
      }
    }
    let instance = new MessageBox({
      data: options
    }).$mount()
    document.body.appendChild(instance.$el) // Add dom elements
    Vue.nextTick(() => { // Execute callbacks when the dom element is rendered
      instance.visible = true
    })
  }
}
Vue.prototype.$message = Message.install;
['success', 'error'].forEach(type => {
  Vue.prototype.$message[type] = (content) => {
    return Vue.prototype.$message(content, type)
  }
})
export default Message

Use components

1. Global Registration

import Vue from 'vue';
import Message from '@/components/common/message';
Vue.use(Message);

2. Calling methods

  private test1() {
    this.$message("This is a piece of common news.");
  }
  private test2() {
    this.$message.success("This is a success story.");
    // this.$message("This is a success message", "success");
  }
  private test3() {
    this.$message.error("This is a failure message.");
    // this.$message("This is a failure message", "error");
  }