Vue作为组件在前端项目中的应用&Vue.set 的用法

hersion 发布于2019-06-28 18:34 / 2726人阅读

摘要：业务背景是，在的前端项目中加入作为组件。但随着需要登录的页面的增多，多个页面都需要添加相同的，，以及前端登录逻辑，所以在原先的项目中添加了，将重复的添加的代码加入到了文件中，然后通过方法将对象挂载到某个的节点上。

业务背景是，在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

loginForm.vue

服务器托管专线服务在深度学习中的应用机器学习在企业中的应用云主机在我们工作中的应用大数据在新零售中的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28412.html

前方来报，八月最新资讯--关于vue2&amp;3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 5 使用 Vuex

摘要：衍生自架构，用来管理应用的状态，强调单向数据流和全局唯一状态。单页应用单向数据流这些概念主要是在前端里比较流行，只是一个，在开发原生应用的时候，页面跳转策略这类问题，我觉得还是应该以客户端自身的架构设计为主。系列文章的目录在 ? 这里什么是 Vuex ？ Vuex 官方文档 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，...

Tonny 2019-06-25 11:04 评论0 收藏0
[使用 Weex 和 Vue 开发原生应用] 5 使用 Vuex

摘要：衍生自架构，用来管理应用的状态，强调单向数据流和全局唯一状态。单页应用单向数据流这些概念主要是在前端里比较流行，只是一个，在开发原生应用的时候，页面跳转策略这类问题，我觉得还是应该以客户端自身的架构设计为主。系列文章的目录在 ? 这里什么是 Vuex ？ Vuex 官方文档 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，...

LiuRhoRamen 2019-06-25 15:58 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

pumpkin9 2019-08-23 17:12 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

Tychio 2019-08-05 16:51 评论0 收藏0