子组件事件回调给父组件

原因:需要在子组件输入框失去焦点时,触发父组件的事件

一 子组件定义事件响应函数,并发射信号

CommonInput.vue
1 定义子组件,失去焦点事件blur绑定响应的函数

<template>
  <input
    type="text"
    @blur="onBlur"  
</template>

2 定义子组件响应的函数

    onBlur: function (){
      this.$emit('onBlur')
    },

二 父组件定义事件

Parent.vue
父组件绑定子组件响应函数

<CommonInput
            @onBlur="modifyUserName"
</CommonInput>

定义父组件响应的函数

modifyUserName: function(){
}

三 引用

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E7%A8%8B%E5%BA%8F%E5%8C%96%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BE%A6%E5%90%AC%E5%99%A8 《程序化的事件侦听器》

猜你喜欢

转载自blog.csdn.net/weixin_34366546/article/details/87539635