vue extend 使用

vue页面大致都是router路由下 写好的单页面 当我们想要增加一个新页面 div 就需要extend

 

1首先创建一个.vue后缀的单页面  例如alert.vue  做一个弹窗

2 创建一个js 用来extend这个单页面 

index.js

import Vue from 'vue';
import alert from './alert.vue'
let MyAlertConstructor = Vue.extend(alert);


let instance;
const MyAlert = (option) => {
  // 创建实例并且过滤参数
  console.log("option: ")
  console.log(option)
  instance = new MyAlertConstructor({
    propsData: {
      ...option
    }
  })

  // 挂载实例
  instance.$mount();
  instance.remove = () => {
    // 删除dom
    document.body.removeChild(instance.$el)

    // 销毁组件
    instance.$destroy()
  }
  console.log('alert', alert, ', MyAlertConstructor', MyAlertConstructor, 'option', option, 'instance', instance, 'instance.$el', instance.$el);

  document.body.appendChild(instance.$el);
  return instance;
}

export default MyAlert    //将至暴露出来好引用

3在我们需要的页面 引用并创建实例

import Hint from './../extends/index'

methods:{
       ooo(){
        this.target = new Hint({title: '校验完成',
          message: '校验失败，请重试！'});
        console.log(Hint)
       },
       ooo2(){
         this.target.remove()    //销毁实例
       },
       handleAddData() {
      
    }
   }

很简单