Vue作为组件在前端项目中的应用技巧

varLoginComponent=require('loginForm.js');varVue=require('vue');varloginForm=require('loginForm.vue');varlogin=exports;varform;/***初始化登录组件*/login.loadLoginForm=function(){if(form){return;}form=newVue(loginForm);form.$mount('#loginForm');};登录组件+业务调用Vue.set()数据传递业务回调https://segmentfault.com/a/11...弹出控制组件组件与父子组件，组件通信，内部生命周期pop.jsvarVue=require('vue');varpop=require('pop.vue');newVue({el:'#pop',render:function(h){returnh(pop)}});pop.vue//父组件script>//加载子组件varpopA=require('popA.vue');varpopB=require('popB.vue');module.exports={data:function(){return{showA:false,showB:false,showMask:false,showUrl:''stack:[]//定义一个stack来存放pop顺序和流}},components:{//es6在定义components时的简写语法糖就是key:value一致而不用写入密钥popA:popA,popB:popB},methods:{clickMask:function(){//console.log('click_mask');},checkShowA:function(){if(!this.checkShow()){返回；}this.stack.push('showA');},checkShowB:function(){this.stack.push('showB');},//showpoptryPop:function(){if(this.stack.length>0){varkey=this.stack.pop();这个[键]=真;this.showMask=true;}else{this.showMask=false;}},closePopMsg:function(type){if(type==1){this.tryPop()}}},created:function(){this.checkShowA();这个.checkShowB();这个.tryPop();}};子组件（popA.vue）设置方法给父组件方法传值：{closeMsg:function(type){this.$emit("listenPop",type);}}城市选择组件listenerwatch：当你需要在数据变化时执行异步或昂贵的操作时，这个方法是最有用的过滤器filter//watch方法监听对象，当数据变化时，触发函数watch:{list:函数(val){this.doSm();},history:function(val){if(val){this.doSm();}}}//使用filter处理接口返回的数据constructUrl:function(list){varvm=this;返回列表。filter(function(item){if(if(vm.type=='1'){)returnitem['url']='javascript:;';})}相关知识点App安装版本受webpack影响取决于关于item原因是babel不支持es6语法转换，所以只能用es5初始化，基础语法，属性绑定，数据绑定，事件绑定mountmount生命周期钩子（create，mount，update，destroy）组件和父子组件、组件通信、内部生命周期Vue.set()数据传输业务回调监听器watch：当数据变化时需要执行异步或昂贵的操作时，该方法是最有用的filter过滤器