美文网首页
21.Vue组件的自定义事件

21.Vue组件的自定义事件

作者: 黑咔 | 来源:发表于2019-04-03 20:07 被阅读0次
  1. 一种组件间通信的方式,适用于:子组件 ===> 父组件

  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。

  3. 绑定自定义事件:

  • 第一种方式,在父组件中:<Student @east="test"/><Student v-on:east="test"/>

  • 第二种方式,在父组件中:

        <Student ref="test"/>
        ......
        mounted(){
           this.$refs.xxx.$on('east',this.test)
        }
  • 若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
  1. 触发自定义事件:this.$emit('east',数据)

  2. 解绑自定义事件this.$off('east')

  3. 组件上也可以绑定原生DOM事件,需要使用native修饰符。

  4. 注意:通过this.$refs.xxx.$on('east',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!

相关文章

  • 21.Vue组件的自定义事件

    一种组件间通信的方式,适用于:子组件 ===> 父组件 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要...

  • vue组件的使用

    props和$emit 组件间通讯和自定义事件 父子通讯 props $emit兄弟组件或者隔代组件使用自定义事件...

  • .native && $listeners

    将原生事件绑定到自定义组件 原生事件在自定义组件上是不起作用的 添加修饰符.native,原生事件在自定义组件上就...

  • 2019-01-31 vue组件基础篇2

    子组件 ═══>向父组件传递数据时,就要用到自定义事件v-on除了监听DOM事件外,还可以用于组件之间的自定义事件...

  • v-model

    使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。...

  • Vue.js 自定义事件

    自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。指令 v-on 除了监听 DOM 事件外,还可以用...

  • Lightning Web Component 事件代码示例

    组件的事件 组件通过各种事件来进行通讯。 在 LWC 中,可以通过实现 CustomEvent 接口进行自定义事件...

  • vue 组件(下篇)

    自定义事件 父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件...

  • vue组件学习2

    一.子组件向父组件传递数据 方法:子组件绑定子组件的自定义事件,但事件处理函数绑定父组件的方法 1.

  • Vue中 子组件与父组件之间的传值

    一、子组件向父组件传值 1、子向父传值 需要用到自定义事件 $emit。 2、this.$emit('自定义的事件...

网友评论

      本文标题:21.Vue组件的自定义事件

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