以 this.$message 这种 API 形式调用组件的原因：

  • 使用自定义的非全局组件时，必须手动 import 和指定 components 对象属性，较为繁琐。以 API 的形式调用组件，方便快捷
  • 在 vue 中，所有页面和组件最终会以
    为根节点，这个根节点一般不会被限制 css position 属性，而弹窗类组件一般是绝对定位于页面中间，所以适合挂载于仅次于 的节点上 ```java // 组件实例的创建 import Vue from ‘vue’

function create(Component, props) { // 1.创建Vue实例,Component是当前组件实例的根组件 const vm = new Vue({ // 1.1 render：虚拟DOM的实现 // 1.2 h是createElement别名，返回虚拟DOM[VNode] // 1.3 参数props是要传递给Component的参数，{props: props, on: {click:onClick}} // 比如： render: h => h(Component, { props }) // 1.4 $mount()会把上面生成的VNode转化成真是DOM，并挂载到目标节点上 // 若不指定选择器，会执行转化过程，只是不挂载 }).$mount()

  1. // 2.手动挂载：使用原生dom api把它插入文档中
  2. // 2.1 vm.$el：真实dom元素
  3. document.body.appendChild(vm.$el)
  5. // 3.回收：防止内存泄漏
  6. // 3.1 vm.$children[0]获取组件实例
  7. const comp = vm.$children[0]
  8. comp.remove = () => {
  9.     document.body.removeChild(vm.$el)
  10.     comp.$destroy()
  11. }
  13. return comp

}

export default create

  1. ```java
  2. //main.js
  3. import Vue from 'vue'
  4. import create from 'create.js'
  5. Vue.prototype.$create = create
  1. <!--MyPopup.vue-->
  2. <template>
  3.   <div class="my-popup" v-if="isShow">
  4.     <!--弹窗遮罩-->
  5.     <div class="my-popup-bg"></div>
  6.     <!--弹窗容器-->
  7.     <div class="my-popup-ctn">
  8.       <p class="my-popup-ctt">
  9.         <span class="inner-ctt">{{message}}</span>
  10.       </p>
  11.     </div>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   props: {
  18.     message: {
  19.       type: String,
  20.       default: ""
  21.     },
  22.     duration: {
  23.       type: Number,
  24.       default: 1000
  25.     }
  26.   },
  27.   data() {
  28.     return {
  29.       isShow: false
  30.     };
  31.   },
  32.   methods: {
  33.     show() {
  34.       this.isShow = true;
  35.       <!--指定一定时间间隔后自动隐藏弹窗-->
  36.       setTimeout(this.hide, this.duration);
  37.     },
  38.     hide() {
  39.       this.isShow = false;
  40.       <!--调用组件实例提供的方法销毁组件实例-->
  41.       this.remove();
  42.     }
  43.   }
  44. };
  45. </script>
  47. <style lang="scss" scoped>
  48. .my-popup {
  49.   position: fixed;
  50.   left: 0;
  51.   right: 0;
  52.   top: 0;
  53.   bottom: 0;
  54.   .my-popup-bg {
  55.     position: absolute;
  56.     left: 0;
  57.     right: 0;
  58.     top: 0;
  59.     bottom: 0;
  60.     background: rgba($color: #000000, $alpha: 0.4);
  61.   }
  62.   .my-popup-ctn {
  63.     position: absolute;
  64.     left: 50%;
  65.     top: 50%;
  66.     width: 600px;
  67.     padding: 20px;
  68.     transform: translate(-50%, -50%);
  69.     background: rgba($color: #000000, $alpha: 0.8);
  70.     border-radius: 16px;
  71.     .my-popup-ctt {
  72.       display: flex;
  73.       min-height: 100px;
  74.       align-items: center;
  75.       justify-content: center;
  76.       .inner-ctt {
  77.         display: inline-block;
  78.         text-align: left;
  79.         font-size: 30px;
  80.         line-height: 50px;
  81.         color: #fff;
  82.       }
  83.     }
  84.   }
  85. }
  86. </style>
  1. <!--TestMyPopup.vue-->
  2. <template>
  3.   <div>
  4.   </div>
  5. </template>
  6. import MyPopup from "MyPopup.vue";
  7. <script>
  8.   export default {
  9.         mounted () {
  10.             const notice = this.$create(MyPopup, {
  11.                 message: '弹~弹~弹，弹走鱼尾纹',
  12.                 duration: 2000
  13.             });
  14.             notice.show();
  15.         },
  16.   }
  17. </script>

参考资料

  1. Vue弹窗类组件的设计与实现