vue实现自定义组件挂载原型上

目录

• 自定义组件挂载原型上
• 以elementUI二次分装dialog举例
• 在原型上挂载方法和组件
• 挂在方法,在main.js中
• 挂载组件

自定义组件挂载原型上

以elementUI二次分装dialog举例

PageDialog.vue

同目录新建index.js

import vue from 'vue';
// 这里就是我们刚刚创建的那个静态组件
import pageDialog from './PageDialog.vue';
// 返回一个 扩展实例构造器
const DialogConstructor = vue.extend(pageDialog);
// 定义弹出组件的函数
function showDialog(options) {
  return new Promise((resolve, reject) => {
    const dialogDom = new DialogConstructor({
      el: document.createElement('div'),
    });
    dialogDom.width = options.width || dialogDom.width;
    dialogDom.title = options.title || dialogDom.title;
    dialogDom.titleIcon = options.titleIcon || dialogDom.titleIcon;
    dialogDom.showCancel = options.showCancel || dialogDom.showCancel;
    dialogDom.cancelText = options.cancelText || dialogDom.cancelText;
    dialogDom.showConfirm = options.showConfirm || dialogDom.showConfirm;
    dialogDom.confirmText = options.confirmText || dialogDom.confirmText;
    dialogDom.message = options.message || dialogDom.message;
    dialogDom.showClose = options.showClose || dialogDom.showClose;
    dialogDom.show = true;
    document.body.appendChild(dialogDom.$el);
    dialogDom.confirm = function () { // 确定按钮
      resolve();
      dialogDom.show = false;
    };
    dialogDom.close = function () { // 取消按钮
      reject();
      dialogDom.show = false;
    };
  });
}
// 注册为全局组件的函数
function registryDialog() {
  // 将组件注册到 vue 的 原型链里去,
  // 这样就可以在所有 vue 的实例里面使用 this.$pageDialog()
  vue.prototype.$pageDialog = showDialog;
}
export default registryDialog;

main.js中引入

import pageDialog from '../components/page-dialog/index';
Vue.use(pageDialog)

可以html组件使用

或者在js中使用

        this.$pageDialog({
          message: '审核后的订单有部分发生变化，确定按调整后订单支付？',
          showCancel: true,
          cancelText: '我在想想',
        }).then(() => {
        // 搞事情
        }).catch(() => {
        // 搞事情
        });

在原型上挂载方法和组件

挂在方法,在main.js中

Vue.prototype.langs = function lang(en, id, zh) {
  const L = this.language
  switch (L) {
    case 'en':
      return en || ''
    case 'id':
      return id || ''
    case 'zh':
      return zh || ''
  }
}

使用：this.langs()

注意：

1、如当前页面中的方法与原型方法名字一致，则会覆盖原型的方法

2、如果原型方法太多写在main.js中会赘余，所以一般在另外创建一个js文件，这个js文件都是全部写原型的方法，然后引入到main.js当中，然后把它放在这个位置

new Vue({
  el: '#app',
  router,
  store,
  test, // 比如这个就是js文件,放到vue上面
  components: { App },
  template: ''
})

挂载组件

import testA from '@/A'
Vue.component('testA ', testA )

使用：或者 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。