通过Vue.extend（）方法，手写messageBox组件

Vue.extend（）实例应用-messageBox

Vue.extend(options)

用法：使用基础Vue构造器，创建一个‘子类’，参数是一个包含组件选项的对象。
注意：data选项必须是一个函数

//创建构造器
var Profile = Vue.extend({
	template:'<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data:function(){
  	return {
    	firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})

//创建Profile实例，并挂载到一个元素上
new Profile().$mount('#mount-point')

extend创建的是一个Vue构造器，不是通常定义的组件，需要挂载到元素上使用。
使用场景：动态渲染组件，像js一样调用

制作一个对话框

1.新建messageBox.vue文件，在该文件中写好模板、样式等

<template>
    <div class="MessageBox">
        <h3>{{ title }}</h3>
        <p>{{ message }}</p>
        <div>
            <div v-if="confirm" @click="handleConfirm">{{ confirm }}</div>
            <div v-if="cancel" @click="handleCancel">{{ cancel }}</div>
        </div>
    </div>
</template>

<script>

export default {
    name:"MessageBox",
    data(){
        return {
            title:"",
            message:"",
            confirm:"",
            cancel:"",
        }
    },
    methods:{
        handleConfirm(){

        },
        handleCancel(){
            
        }
    }
}

</script>
<style lang='scss' scoped>
    /*样式自定*/
</style>

2.新建一个名为messageBox.js的文件

//引入Vue和messageBox.vue文件
import Vue from "vue";
import MessageBox from './messageBox.vue';

//定义一个函数
var messageBox = function(options) {
  //设置默认值
  let defaults = {
    title: "标题",
    message: "message",
    confirm: "确定",
    cancel: "",
    handleConfirm: null,
    handleCancel: null
  }
  //通过Vue.extend（）函数，创建一个Vue构造器 Component
  var Component = Vue.extend(MessageBox);
  //将传入的值赋值给默认值
  for (let key in options) {
    defaults[key] = options[key];
  }
  
  //利用解构赋值定义变量
  let {
    title,
    message,
    confirm,
    cancel
  } = defaults;
  
  //实例化构造器
  var vm = new Component({
    //如果没有挂载的话，没有关联的 DOM 元素。是获取不到$el的。
    //或者new Component({...}).$mount('#main')
    el: document.createElement("div"), //挂载方式之一
    data() {
      return {
        title,
        message,
        confirm,
        cancel
      }
    },
    methods: {
      handleConfirm() {
        //如果传入了默认的确认方法，则defaults.handleConfirm为真，执行defaults.handleConfirm.call(this)
        defaults.handleConfirm && defaults.handleConfirm.call(this);
        //从body中移除组件
        document.body.removeChild(vm.$el);
      },
      handleCancel() {
        defaults.handleCancel && defaults.handleCancel.call(this);
        document.body.removeChild(vm.$el);
      }
    }
  })
  //将组件插入body中
  document.body.appendChild(vm.$el)
}
export default messageBox;

3.在main.js文件中将组件挂载到Vue的原型上，这种方式可实现全局使用，无需引入文件

import messageBox from './base/messageBox/messageBox.js'
Vue.prototype.$messageBox = messageBox;

4.单文件使用示例

this.$messageBox({
  title:"aaaa",
  message:"hello",
  confirm:"确定",
  cancel:"取消",
  handleConfirm(){},
  handleCancel(){}
})

主要知识点

• Vue.extend()方法创建的是Vue构造器，不是一个常规组件
• 通过Vue.extend()方法创建的构造器需要实例化
• 实例需要挂载在DOM元素上