业务背景是，在jq的前端项目中加入Vue作为组件。
原本的登录功能是每个页面加一个登录弹窗（手机号+验证码验证登录），然后发ajax请求到后端，登录成功后再进行一些操作。
但随着需要登录的页面的增多，多个页面都需要添加相同的html，js，css以及前端登录逻辑，所以在原先的项目中添加了vue，将重复的添加的代码加入到了vue文件中，然后通过$mount方法将vue对象挂载到某个ID的dom节点上。这样，就让所有的页面调用统一的登录弹窗，执行相同的js登录代码了，并且将登录逻辑完全与页面上的业务逻辑解耦了。
但后来需求又有了新的变化，原本loginForm 组件只是一个用来登录的弹窗，但有一个页面PM同学却希望不用执行验证登录逻辑，只要输入手机号，就可以直接直接执行后端逻辑。
好吧。。。
我找了 Vue.set 方法解决了这个问题：
通过Vue.set方法向vue对象中的data设置一个响应式对象，使该对象能够在初始化阶段接收控制参数 Vue.set(form.$data, 'setData', data);
在不同的页面向页面传输不同的参数来控制弹窗显示，以及后续是否执行ajax请求逻辑。
调用登录组件的js
var callBack = function () {//加入callback方法作为回调函数，将业务代码与登录逻辑解耦
...
}
var LoginComponent = require('loginForm.js');//获得登录组件
var setData = {
'hideLogin': true,
'callBack': callBack
};//自定义数据
LoginComponent.loadLoginForm(setData);//初始化登录组件
loginForm.js
var Vue = require('vue');
var loginForm=require('loginForm.vue'); //引入一个附带模板的vue文件
var login = exports;
var form;
/**
* 初始化登录组件
*/
login.loadLoginForm = function (data) {
if(form){
return;
}
form = newVue(loginForm); //new一个vue对象
if (typeof(data) !== "undefined") {
//通过Vue.set方法对要显示的对象进行控制，使该对象能够在初始化阶段接收控制参数
Vue.set(form.$data, 'setData', data);//向vue对象中的data设置一个响应式对象，绕过了限制
}
form.$mount('#loginForm');//将对象绑定挂载到某个id上
};
html
<div id="loginForm"></div>
loginForm.vue
<template>
/** 登录弹窗 **/
<div>
<input v-if="show" />
<input v-if="!setData.hideLogin" />
...
</div>
</template>
<script>
module.exports = {
data: function () {
return {
setData: {}
}
},
methods: {
getA: function () {
...
if (true) {
this.setData.callBack();// 执行回调函数
}
},
setB: function () {
...
}
},
created: function () {
this.setB();
},
updated: function () {
this.getA();
}
</script>
