这两天有位前女性共事问了我一个vue技术问题，大略是这样的，他们公司中台技术部门封装了一套elementui组件（预计就是改了下名字和款式），他们的我的项目间接拿来用，而后他们我的项目里预计用了大几十上百个input组件，然而有个新需要是想让input组件显示历史记录，也就是说加上name属性和autocomplete为on，在不让中台部门改的状况下，他只能把所有的input组件一个一个改掉（加上name和autocomplete），但她不想这么麻烦，她打算一次性改掉也就是全局设置，但始终没有胜利。以下是解决过程。

在mainjs入口文件里，拦挡Input的beofreCreate
main.js:

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';ElementUI.Input.props.autocomplete="on"ElementUI.Input.beforeCreate = function() {  this.$attrs.name = "xuper"  console.log("aaaaa");};ElementUI.Input.beforeUpdate = function() {  this.$attrs.name = "xuper"  console.log("cccc");};Vue.use(ElementUI);


如图所示，当页面有input组件时，控制台打印出了“aaaaa”，切dom上胜利设置了name属性。
留神点：

  1. 因为组件生命周期的作用，当input的值扭转时（v-model绑定的data变动），触发boforeUpdate钩子，虚构dom会从新渲染，这时dom上的name属性会失落，所以须要加上，beforeUpdate的拦挡，当数据扭转时，再度将name属性设置。
  2. beforeCreate和boforeUpdate须要在Vue.use(ElementUI)之前进行拦挡，否则ElementUI Install之后无奈再触发两个生命周期函数。
  3. 之所以拦挡生命周期再去赋值是为了动静设置name的值，她是想把v-model绑定的变量值名称（比方v-model="login_name"）赋给name="login_name"，我只是写的demo而已。

动静赋值代码如下:打码处为ElementUI.