使用Vue.extend封装组件

既然要使用Vue.extend（）封装组件，那这玩意儿到底是什么呢？我们且来看官方解释

官方眼里的Vue.extend（）

1.参数：

{Object} options

2.用法：

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

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

// 创建构造器
var Profile = Vue.extend({
  template: '
{{firstName}} {{lastName}} aka {{alias}}
',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下：
复制代码

Walter White aka Heisenberg

在下眼里的Vue.extend（）

1.且听分解

按照目前的使用情况来讲，它一般用来封装通用（公共）的通知组件，类似ElementUI的Message提示组件等。

2.使用方式

它的使用方式与message组件是不一样的，它是函数式调用（eg:this.$message('test')），类似的组件还有alert提示组件等通用的函数式组件，实现方法与此类似。

3.需要用到的vue的api

const Message = Vue.extend(message) // 使用基础 Vue 构造器，创建一个“子类”
const _Message = new Message({}) // 实例化组件
let vm = _Message.$mount() // 挂载, vm 就是组件里的this
复制代码

4.使用场景（实例）

此处以Message消息提示组件的封装为例， 源码src文件地址 （内含Message消息提示组件和MessageBox弹框的封装）

1）效果图

2) 代码实现

文件目录展示

![4PY160WO1{$`@132V(VTIX (1).png

// index.js
/* eslint-disable no-mixed-operators */
import Vue from 'vue';
// 导入的message对象为message.vue的配置项
import message from './Message';
// 将组件message.vue的配置项，作为Message类（VUe类,Vue构造器）的默认配置项，
const Message = Vue.extend(message);// 使用基础 Vue 构造器，创建一个“子类”

const vmArr = [];
function $message(opts) {
  // 接收参数，传递给message类，覆盖默认值  比如：提示文字/自动关闭时间/主题颜色
  // eslint-disable-next-line no-underscore-dangle
  const _message = new Message({
    data() {
      return {
        msg: opts.message || '默认提示',
        type: opts.type,
        isVisible: false,
        // eslint-disable-next-line no-mixed-operators
        top: `${vmArr.length * 68 + 20}px`,
      };
    },
    methods: {
      show() {
        this.isVisible = true;
        vmArr.push(this);
      },
      hide() {
        this.isVisible = false;
        vmArr.shift();
        vmArr.forEach((item, index) => {
          // eslint-disable-next-line no-param-reassign
          item.top = `${index * 68 + 20}px`;
        });
      },
    },
    mounted() {
      this.show();
      setTimeout(() => {
        this.hide();
      }, 3000);
    },
  });// 实例化组件
  // 模板编译到实例的$el属性
  _message.$mount();
  // 手动挂载到指定节点body
  document.body.appendChild(_message.$el);
}

export default {
  // eslint-disable-next-line no-shadow
  install(Vue) {
    // eslint-disable-next-line no-param-reassign
    Vue.prototype.$message = $message;
  },
};
复制代码

// Message.vue





复制代码

//main.js
/* eslint-disable no-new */
import Vue from 'vue';
import App from './App';
import $message from './components/message';

Vue.use($message);

new Vue({
  el: '#app',
  name: 'Root',
  template: '',
  components: { App },
});

复制代码

// App.vue






复制代码

以上就是使用Vue.extend（）将Message提示组件封装成通用组件的全部代码了