通过Vue.extned动态创建组件

官方文档：https://cn.vuejs.org/v2/api/#Vue-extend

 

vue.extend使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

extend是产生一个继承自Vue类的子类，只会影响这个子类的实例对象，不会对Vue类本身以及Vue类的实例对象产生影响。

vue.extend相当于一个扩展实例构造器，用于创建一个具有初始化选项的Vue子类，在实例化时可以进行扩展选项，最后使用$mount方法绑定在元素上。

 

通过vue.extend动态创建做全局toast

首先创建一个toast.vue文件，该文件不写data数据

<template>
  <transition name="toast-transition">
    <div v-show="show" class="toast">
      <div class="toast-content">{{ content }}</div>
    </div>
  </transition>
</template>
<style scoped>
.toast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}
.toast-content {
  max-width: 320px;
  padding: 10px 30px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 30px;
  color: #fff;
  line-height: 60px;
}
.toast-transition-enter-active,
.toast-transition-leave-active {
  transition: opacity 0.5s;
}
.toast-transition-leave,
.toast-transition-enter-to {
  opacity: 1;
}
.toast-transition-enter,
.toast-transition-leave-to {
  opacity: 0;
}
</style>

 

创建一个toast.js文件，，通过vue.extend方法动态创建toast文件，

引入toast组件
import Vue from 'vue'
import toast from './toast.vue'

// 动态创建组件
function showToast(content, duration = 2000) {
　　// 这里创建的ToastConstructor是toast的构造函数，类似于Vue构造函数，需要通过new实例化它
  const ToastConstructor = Vue.extend(toast);

　　// ToastDom是toast组件的实例，它上面有很多实例属性
  let ToastDom = new ToastConstructor({
    el: document.createElement('div'),
    data() {
      return {
        show: true,
        content
      };
    }
  });
　　// 元素插入body中
  document.body.appendChild(ToastDom.$el);
　　

　　// 2秒后隐藏，组件销毁，ToastDom设置为null,让垃圾回收机制回收
  setTimeout(() => {
    ToastDom.show = false;
    setTimeout(() => {
      document.body.removeChild(ToastDom.$el);
      ToastDom.$destroy();
      ToastDom = null;
      console.log(ToastDom);
    },500);
  },duration);

}


export default {
  install() {
    Vue.prototype.$toast = showToast;
  }
};

 

调用

<script>
export default {
  created() {
    this.$toast('hello world');
  }
}
</script>

 

用vue.extend动态创建toast缺点：

1、每次调用都会操作DOM，如每次都会往body里面插入元素，调用完又会移除这个元素

2、每次调用都会创建一次组件实例

 

 

 extend使用场景

1、当你需要在某一个场景内要使用一个新功能，该新功能只是在某组件上作一些新的逻辑新功能即可