通过图片上传组件的使用来描述父子组件之间的传值问题父组件向子组件传值：用prop；子组件能够改变父组件的值，是共享的，和父操作是一样的效果；子组件向父组件传值用ref，父中通过this.$refs[“*“].属性可以得到子组件的data属性值，共享，能进行更改操作；用eventBus监听事件与触发事件；自定义事件，this.$emit,发送信息下面开始详解处理过程整个逻辑思想描述1.引入自定义的全局图片管理组件<hl-imgbox></hl-imgbox>2.通过在当前页面（也就是父组件页面）创建按钮（上传图片）触发图片管理组件3.点击上传按钮弹出图片组件对话框（可以选择已上传的图片，也可以新上传图片），在图片组件内将选择好的图片通过确定选择按钮传到父组件内的图片src内4.在父组件内点击新增或者修改页面内的确定按钮将对应的图片路径保存到数据库处理父组件中的事情在父组件AddOrUpdate<add-or-updatev-if="addOrUpdateVisible"ref="addOrUpdate"@refreshDataList="getDataList"></add-or-update>中添加图片组件代码<hl-imgboxv-if="uplodImgVisible"ref="selectedImgData"@getImgsData='getImgsData'@closeImgBox='closeImgBox':multipleval="datalevelForm.multipleval"></hl-imgbox>说明：v-if=”uplodImgVisible”处理默认图片组件是否显示ref=”selectedImgData”将来父组件可以通过this.$refs[“子组件中方法或者data”]拿到子组件的数据@getImgsData=’getImgsData’监听或者接收子组件使用this.$emit(‘getImgsData’,this.selectedImgsData)传给父组件值@closeImgBox=’closeImgBox’监听或者接收子组件使用this.$emit(‘closeImgBox’,false)传给父组件值props:{multipleval:{default:false}},watch:{multipleval:{handler(val){this.options.multiple=val},immediate:true}},这里对子组件监听父组件传过来的值做个说明watch是一个对象，对象就有键，有值。值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是变化前的值。值也可以是函数名：不过这个函数名要用单引号来包裹。值是包括选项的对象：选项包括有三个。第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep：其值是true或false；确认是否深入监听。deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器（受现代JavaScript的限制(以及废弃Object.observe)，Vue不能检测到对象属性的添加或删除）第三个是immediate：其值是true或false；immediate:true代表如果在wacth里声明了之后，就会立即先去执行里面的handler方法，如果为false就跟我们以前的效果一样，不会在绑定的时候就执行创建如下图片显示代码<el-imagestyle="width:100px;height:100px":src="datalevelForm.imgRes.urlsrc":fit="fit"></el-image></div>datalevelForm.imgRes.urlsrc负责接收来自图片组件传过来的图片url值
在介绍Vue生命周期之前有必要先讨论一下钩子函数（hooks）钩子钩子这事情需要相对的理解，直白点说，它也只是一些函数而已。但是把一些指定情况的函数组合成一个链条，就像描述一个动作的开始到结束的过程，亦或者是一个人的出生到死亡的过程。钩子函数的作用就是记录这个过程中的一些重要的细化的动作。只不过是一些特定状态下的函数。Vue的生命周期及钩子只看官方对Vue的生命周期的描述很难把这个事情理解透彻，下面我把官方的生命周期图转换成另外一种描述的图下面是转换后的生命周期图<!DOCTYPEhtml><html><head><title>钩子函数</title><metacharset="utf-8"><scriptsrc="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script><body><divid="app"><p>{{message}}</p><inputtype="button"@click="change"value="更新数据"/><inputtype="button"@click="destroy"value="销毁"/></div><scripttype="text/javascript">varvm=newVue({el:'#app',data:{message:"WelcomeVue"},methods:{change(){this.message='Daturaisme';},destroy(){vm.$destroy();}},beforeCreate:function(){console.group('beforeCreate创建前状态===============》');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:red","data:"+this.$data);//undefinedconsole.log("%c%s","color:red","message:"+this.message);//undefined},created:function(){console.group('created创建完毕状态===============》');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:green","data:"+this.$data);//[objectObject]=>已被初始化console.log("%c%s","color:green","message:"+this.message);//WelcomeVue=>已被初始化},beforeMount:function(){console.group('beforeMount挂载前状态===============》');console.log("%c%s","color:green","el:"+(this.$el));//已被初始化console.log(this.$el);//当前挂在的元素console.log("%c%s","color:green","data:"+this.$data);//已被初始化console.log("%c%s","color:green","message:"+this.message);//已被初始化},mounted:function(){console.group('mounted挂载结束状态===============》');console.log("%c%s","color:green","el:"+this.$el);//已被初始化console.log(this.$el);console.log("%c%s","color:green","data:"+this.$data);//已被初始化console.log("%c%s","color:green","message:"+this.message);//已被初始化},beforeUpdate:function(){alert("更新前状态");console.group('beforeUpdate更新前状态===============》');//这里指的是页面渲染新数据之前console.log("%c%s","color:green","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:green","data:"+this.$data);console.log("%c%s","color:green","message:"+this.message);alert("更新前状态2");},updated:function(){console.group('updated更新完成状态===============》');console.log("%c%s","color:green","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:green","data:"+this.$data);console.log("%c%s","color:green","message:"+this.message);},beforeDestroy:function(){console.group('beforeDestroy销毁前状态===============》');console.log("%c%s","color:red","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:red","data:"+this.$data);console.log("%c%s","color:red","message:"+this.message);},destroyed:function(){console.group('destroyed销毁完成状态===============》');console.log("%c%s","color:red","el:"+this.$el);console.log(this.$el);console.log("%c%s","color:red","data:"+this.$data);console.log("%c%s","color:red","message:"+this.message)}})</script></body></html>created和mounted的区别beforecreated：el和data并未初始化created:完成了data数据的初始化，el没有beforeMount：完成了el和data初始化mounted：完成挂载updated这个钩子函数主要负责处理：当我们单击页面中的“更新数据”按钮，将数据更新。就能看到data里的值被修改后，这时将会触发update的操作。destoryed销毁生命周期，当执行完destoryed以后当前页面就不会再受Vue的任何影响。再实际操作过程中，可能使用的相对比较少，因为貌似很难停止页面的操作小结一下beforecreate:举个栗例子：可以在这加个loading事件created：在这结束loading，还做一些初始化，实现函数自执行mounted：在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestory：你确认删除XX吗？destoryed：当前组件已被删除，清空相关内容生命周期需要相对的理解和体会，才能准确判定在什么情况下去使用哪个钩子函数。
实现该项参数的获取要考虑以下几个方面的事情：1.浏览器是否满足ES5及ES6的问题2.要熟悉WEBAPI的一些内置函数及对象，如：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/locationfunctionloadPageVar(sVar){returndecodeURI(window.location.search.replace(newRegExp("^(?:.*[&\\?]"+encodeURI(sVar).replace(/[\.\+\*]/g,"\\$&")+"(?:\\=([^&]*))?)?.*$","i"),"$1"));}console.log('路由URL：'+location)console.log('路由URL参数：'+loadPageVar("logintype"))本次总结如下：
涉及工具软件：HBuilder软件最新版VisualStudioCode手机一部（推荐安卓，亲测锤子手机）商米收银机一台谷歌浏览器VueCli脚手架第一步：将做好的Vue前端进行Build命令发布重点路径问题：因为正常Vue内调试的时候使用的publicPath=‘/’（注意publicPath的默认值就是/）,但是打包成app以后需要变换成相对路径（./）,即publicPath=‘./’，否则会发生所有资源全部找不到错误提示。API接口数据传输问题：正常的Vue跨域在这里的不起作用的，需要手动更改配置文件中API接口前缀，并附带接口跨域网址，如下图所示第二步：将发布后的文件在HBuilder中导入，并将W模式转换成A模式主要是要生成manifest.json文件，并进行APP发布的各项参数配置第三步：先连接真机（安卓的）进行测试确保真机状态下无任何问题（注意：此处一般会产生的问题是路径错误或者API请求连接错误）第四步：发布打包app安卓和IOS都可以，亲测安卓、IOS均没有问题第五步：安装应用体验功能，测试数据完整度。