vue中的$emit方法

使用场景：

　　今天遇到一个需要在js中获取select标签中key和label值，但此时的select是自定义的封装ISelect,封装的方法中遇到$emit，特此总结一下

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit,让父组件监听到自定义事件 。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn； 

封装的方法：

<el-select v-model="" :placeholder="" @chenge="doSelect"></select>

methods:{
  doSelect(type){
      var label = this.options.filter(v=>v.value==type)[0].label;
      this.$emit('getLabel',label);
  }  
}

 

调用时使用：

<ISelect :url="'/comm/com/listAllCompany'"  v-model="" @getLabel="getName">

methods{
    getName(data){
       alert(data);//此时的data就是封装的方法中传过来的label
    }
}