用Vue.extend构建消息提示组件的方法实例
发布时间：2020-12-17 02:50:52 所属栏目：百科 来源：网络整理
导读：前提 前段时间自己做的vue练手项目，需要一个通用的消息提示组件，但是消息提示这种组件我更想用方法来调用，而不是在各个页面上都添加个组件（那样感觉很麻烦，重度懒癌患者），于是就上网差查了查，并研究了ElementUI的message源码。自己弄出来一个简陋的
前提前段时间自己做的vue练手项目，需要一个通用的消息提示组件，但是消息提示这种组件我更想用方法来调用，而不是在各个页面上都添加个组件（那样感觉很麻烦，重度懒癌患者），于是就上网差查了查，并研究了ElementUI的message源码。自己弄出来一个简陋的消息提示组件 Vue.extend是什么
按照官方文档说法，他是一个类构造器，用来创建一个子类vue并返回构造函数，而Vue.component它的任务是将给定的构造函数与字符串ID相关联，以便Vue.js可以在模板中接收它。 了解了这点之后我们开始做我们的消息提示组件吧。 消息提示组件首先我们先创建我们的提示组件的模板 之后我们需要用将message.vue传到Vue.extend()里 const type = ['success','info','warning','error'];
type.forEach((type)=>{ message[type] = options =>{ if(typeof options === 'string'){ options = { message: options } } options.type = type; return message(options); } }) export default message; 之后用挂在全局方法上,之后用this.$message()方法调用 最后的效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
