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

1.需求

1.1 需求描述

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

1.2 需求分析

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

2.解决方法

2.1 子组件的代码

template模板代码

script代码

2.2 父组件的代码

template模板代码

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