通过图片上传组件的使用来描述父子组件之间的传值问题父组件向子组件传值：用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学习笔记