vue中this.$message的实现过程详解

在Vue中，组件拥有自己的作用域，因此当在组件中调用某些全局方法时需要使用this.$xx的方法。Vue提供了一些内置的全局方法，如$message，用于方便地显示提示信息。

实现步骤

注册$message方法

Vue在其原型链上注册了$message方法。在Vue.prototype上定义该方法，使其被用于每个组件实例上。

Vue.prototype.$message = function (msg) {
  // 显示提示信息
};

创建message组件

$message方法需要创建一个message组件用于显示提示信息。该组件应该被动态创建、插入到DOM中，并在一定时间后自动销毁。

<template>
  <div class="message">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    setTimeout(() => {
      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
    }, 3000);
  }
};
</script>

显示提示信息

在$message方法中创建并显示message组件，并将对应的提示信息传递给组件。

Vue.prototype.$message = function (msg) {
  const MessageConstructor = Vue.extend(MessageComponent);
  const instance = new MessageConstructor({
    el: document.createElement('div'),
    data: {
      message: msg
    }
  });
  document.body.appendChild(instance.$el);
};

示例说明

示例1：提示登录成功

this.$message('登录成功');

该示例使用Vue提供的$message方法，将字符串“登录成功”传递给方法进行提示。Vue会动态创建一个用于显示提示信息的message组件，并且将“登录成功”传递给组件进行显示。

示例2：自定义message组件

<template>
  <div class="message" :style="styleObj">{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
    type: {
      type: String,
      default: 'success'
    }
  },
  data() {
    return {
      styleObj: {}
    };
  },
  mounted() {
    switch (this.type) {
      case 'success':
        this.styleObj.backgroundColor = '#7fff00';
        break;
      case 'warning':
        this.styleObj.backgroundColor = 'orange';
        break;
      case 'error':
        this.styleObj.backgroundColor = 'red';
        break;
    }
    setTimeout(() => {
      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
    }, 3000);
  }
};
</script>

在该示例中，我们自定义了message组件。并将“success”、“warning”、“error”等不同类型的消息显示在不同的背景颜色下。我们在$message方法中创建组件时，将不同类型的信息和对应的背景颜色传递给组件，从而实现了自定义的提示消息。