Vue父组件监听子组件的方法并接收子组件的传值

1.需求

1.1 需求描述

子组件是一个字典表的下拉选择器，父组件需要根据子组件选择的不同内容展示不同的效果

1.2 需求分析

父组件需要去监听子组件的事件，并接收子组件的传值。

2.解决方法

2.1 子组件的代码

template模板代码

<template>
  <div>
    <el-select class="width100" v-model="selectValue" autocomplete clearable :disabled="disabled" v-on:change="changeVal"
               :placeholder="placeholder" filterable>
      <el-option
        v-for="item in options"
        :key="item.key"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

script代码

<script>
  export default {
    name: 'el-dict',
    componentName: 'ElDict',
    data () {
      return {
        placeholder: '请选择',
        options: [],
        selectValue: ''
      }
    },
    methods:{
      changeVal:function () {
        this.$emit('changeVal',this.selectValue)
      }
    },
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      // 导入的url地址
      code: {
        type: String
      },
      // 接受外部v-model传入的值，必须使用value
      value: {
        type: String
      }
    },
    watch: {
      // 判断下拉框的值是否有改变
      selectValue (val, oldVal) {
        // alert(this.selectValue);
        if (val !== oldVal) {
          this.$emit('input', this.selectValue)
        }
      },
      value (val) {
        if (typeof val === 'number') {
          this.selectValue = val.toString()
        } else {
          this.selectValue = val
        }
      }
    },
    mounted () {
      // 远程请求回来的数据
      this.$http("请求地址")
        .then((response) => {
          if (response.data.type) {
            this.placeholder = response.data.type
          }
          for (let i = 0; i < response.data.list.length; i++) {
            this.options[i] = {}
            this.options[i].label = response.data.list[i]['name']
            this.options[i].value = response.data.list[i]['value']
            this.options[i].key = i
          }
        })
    }
  }
</script>

2.2 父组件的代码

template模板代码

<el-dict v-on:changeVal="lockValueSel" code="LOCK_TYPE" v-model="dataForm.lockType" :disabled="disabled" ></el-dict>

script代码

lockValueSel:function(selectValue){
        alert(selectValue);
      }

2.3 运用的知识点

vm.$on( event, callback ):(监听事件)

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$emit( eventName, […args] )(触发事件)
触发当前实例上的事件。附加参数都会传给监听器回调。

3.逻辑总结

3.1处理步骤

第一步:

第二步:

第三步:

第四步:## 3.2白话梳理

儿子（子组件）通过v-on的方式对外宣称自己要做什么事情了，并通过emint()方法告诉外面自己要做的事件，以及给外界自己做这件事件的参数
父亲或者母亲（父组件），通过v-on的方式监督儿子（子组件）做了什么事情，传递出来什么样的信息

参考:https://blog.csdn.net/hayre/article/details/60572435