组件的自定义事件

suaxi
2022-07-17 / 0 评论 / 40 阅读 / 正在检测是否收录...
  1. 定义:一种组件间的通信方式,适用于:子传父
  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中
  3. 绑定自定义事件:

    (1)方式一:

    <Demo @getName="getName"/>
    或
    <Demo v-on:getName="getName"/>

    (2)方式二:

    <Demo ref="getName"/>
    
    mounted() {
        //this.xxx为回调方法
        this.$refs.getName.$on('getName', this.xxx)
    }

    (3)若想让自定义事件只触发一次,可以使用once修饰符或$once方法

  4. 触发自定义事件:this.$emit('getName', 参数)
  5. 解绑自定义事件:

    解绑一个:this.$off('getName')

    解绑多个:this.$off(['getName', 'getAge'])

  6. 组件上可以使用native修饰符绑定原生DOM事件
  7. 注:通过this.$refs.getName.$on('getName', this.xxx)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数
0

评论 (0)

取消