資訊專欄INFORMATION COLUMN
摘要：業(yè)務(wù)背景是，在的前端項(xiàng)目中加入作為組件。但隨著需要登錄的頁面的增多，多個(gè)頁面都需要添加相同的，，以及前端登錄邏輯，所以在原先的項(xiàng)目中添加了，將重復(fù)的添加的代碼加入到了文件中，然后通過方法將對(duì)象掛載到某個(gè)的節(jié)點(diǎn)上。
業(yè)務(wù)背景是，在jq的前端項(xiàng)目中加入Vue作為組件。
原本的登錄功能是每個(gè)頁面加一個(gè)登錄彈窗（手機(jī)號(hào)+驗(yàn)證碼驗(yàn)證登錄），然后發(fā)ajax請(qǐng)求到后端，登錄成功后再進(jìn)行一些操作。
但隨著需要登錄的頁面的增多，多個(gè)頁面都需要添加相同的html，js，css以及前端登錄邏輯，所以在原先的項(xiàng)目中添加了vue，將重復(fù)的添加的代碼加入到了vue文件中，然后通過$mount方法將vue對(duì)象掛載到某個(gè)ID的dom節(jié)點(diǎn)上。這樣，就讓所有的頁面調(diào)用統(tǒng)一的登錄彈窗，執(zhí)行相同的js登錄代碼了，并且將登錄邏輯完全與頁面上的業(yè)務(wù)邏輯解耦了。
但后來需求又有了新的變化，原本loginForm 組件只是一個(gè)用來登錄的彈窗，但有一個(gè)頁面PM同學(xué)卻希望不用執(zhí)行驗(yàn)證登錄邏輯，只要輸入手機(jī)號(hào)，就可以直接直接執(zhí)行后端邏輯。
好吧。。。
我找了 Vue.set 方法解決了這個(gè)問題：
通過Vue.set方法向vue對(duì)象中的data設(shè)置一個(gè)響應(yīng)式對(duì)象，使該對(duì)象能夠在初始化階段接收控制參數(shù) Vue.set(form.$data, "setData", data);
在不同的頁面向頁面?zhèn)鬏敳煌膮?shù)來控制彈窗顯示，以及后續(xù)是否執(zhí)行ajax請(qǐng)求邏輯。
調(diào)用登錄組件的js
var callBack = function () {//加入callback方法作為回調(diào)函數(shù)，將業(yè)務(wù)代碼與登錄邏輯解耦
...
}
var LoginComponent = require("loginForm.js");//獲得登錄組件
var setData = {
"hideLogin": true,
"callBack": callBack
};//自定義數(shù)據(jù)
LoginComponent.loadLoginForm(setData);//初始化登錄組件
loginForm.js
var Vue = require("vue");
var loginForm=require("loginForm.vue"); //引入一個(gè)附帶模板的vue文件
var login = exports;
var form;
/**
* 初始化登錄組件
*/
login.loadLoginForm = function (data) {
if(form){
return;
}
form = newVue(loginForm); //new一個(gè)vue對(duì)象
if (typeof(data) !== "undefined") {
//通過Vue.set方法對(duì)要顯示的對(duì)象進(jìn)行控制，使該對(duì)象能夠在初始化階段接收控制參數(shù)
Vue.set(form.$data, "setData", data);//向vue對(duì)象中的data設(shè)置一個(gè)響應(yīng)式對(duì)象，繞過了限制
}
form.$mount("#loginForm");//將對(duì)象綁定掛載到某個(gè)id上
};
html
loginForm.vue
/** 登錄彈窗 **/...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/28412.html
摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個(gè)鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運(yùn)，我不曉得。我只曉得，不認(rèn)命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級(jí)前端工程師快...
閱讀 3522·2021-10-08 10:04
閱讀 869·2019-08-30 15:54
閱讀 2185·2019-08-29 16:09
閱讀 1352·2019-08-29 15:41
閱讀 2279·2019-08-29 11:01
閱讀 1739·2019-08-26 13:51
閱讀 1030·2019-08-26 13:25
閱讀 1814·2019-08-26 13:24
