美文网首页前端技术
子组件事件回调给父组件

子组件事件回调给父组件

作者: 剑有偏锋 | 来源:发表于2019-01-14 17:33 被阅读15次

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

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

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 《程序化的事件侦听器》

相关文章

  • 子组件事件回调给父组件

    原因:需要在子组件输入框失去焦点时,触发父组件的事件 一 子组件定义事件响应函数,并发射信号 CommonInpu...

  • vue---子父、父子、非父子组件通信

    子组件和父组件通信 在父组件中使用子组件时自定义事件,设置该事件的回调函数 在子组件中需要传数据给父组件时调用th...

  • vue3 -script-setup emits - defin

    子组件 父组件 父组件接收到子组件的事件响应

  • 父组件触发子组件的事件

    子组件上ref 写好值。父组件上写一个触发事件,这个事件触发子组件的事件例如父组件 子组件ordernum

  • 公共子组件(父传子)

    父组件(弹框为例) 组件应用: 引用组件: 点击事件,显示子组件 定义子组件 子组件 子组件加监听事件,防止父级数...

  • Vue.js组件传值

    子组件向父组件传值 在子组件页面触发事件$emit 在父组件中在组件标签中调用v-on事件监听 父组件向子组件传值...

  • 父子组件传值

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面父组件这么写 子组件component-...

  • 小程序父子组件传值

    父传子: 父组件做的操作 子组件做的操作: 子传父: 父组件绑定子组件的事件

  • 2018-03-29

    子组件向父组件传递事件 父组件的数据是通过变量传递给子组件,子组件内的prop接受数据;子组件内部发生的事件,子组...

  • vue组件间传值

    一. 子组件向父组件传值 - $emit 发射事件 1. 子组件$emit发射事件A 2. 父组件通过事件名A...

网友评论

    本文标题:子组件事件回调给父组件

    本文链接:https://www.haomeiwen.com/subject/olejdqtx.html