您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 335人已围观

简介 vue实现自定义组件挂载原型上_vue.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 )

使用:或者 

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

-六神源码网