vue 中父子组件传值说明：props和$emit

通过图片上传组件的使用来描述父子组件之间的传值问题

父组件向子组件传值：

用prop；子组件能够改变父组件的值，是共享的，和父操作是一样的效果；

子组件向父组件传值

• 用ref ，父中通过this.$refs[“*“].属性 可以得到子组件的data属性值，共享，能进行更改操作；
• 用eventBus 监听事件与触发事件；
• 自定义事件，this.$emit,发送信息

下面开始详解处理过程

整个逻辑思想描述

1.引入自定义的全局图片管理组件<hl-imgbox></hl-imgbox>
2.通过在当前页面（也就是父组件页面）创建按钮（上传图片）触发图片管理组件
3.点击上传按钮弹出图片组件对话框（可以选择已上传的图片，也可以新上传图片），在图片组件内将选择好的图片通过确定选择按钮传到父组件内的图片src内
4.在父组件内点击新增或者修改页面内的确定按钮将对应的图片路径保存到数据库

处理父组件中的事情

在父组件AddOrUpdate

<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

中添加图片组件代码

<hl-imgbox  v-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-image
            style="width: 100px; height: 100px"
            :src="datalevelForm.imgRes.urlsrc"
            :fit="fit"></el-image>
        </div>

datalevelForm.imgRes.urlsrc 负责接收来自图片组件传过来的图片url值