Vue 3 迁移策略笔记—— 第19节:移除 $listeners

前言

本笔记主要基于官方文档《迁移策略—— 移除$listeners》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。

概述

Vue 3.x 已经弃用$listeners 对象。而是将事件监听器并入$attrs ,作为attrs 的一部分。

$listeners 简介

vm.$listeners

2.4.0 新增

  • 类型{ [key: string]: Function | Array<Function> }

  • 只读

  • 详细

    包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

Vue 2.x 向组件传递属性和监听器

在 Vue 2.x 中,我们可以通过this.$attrsthis.$listeners 向组件传递属性和监听器。再结合使用 inheritAttrs: false ,甚至可以将这些属性和监听器绑定到其他元素上而不根元素:

<template>
  <label>
    <input type="text" v-bind="$attrs" v-on="$listeners" />
  </label>
</template>
<script>
  export default {
    inheritAttrs: false
  }
</script>

上面代码为 input 元素绑定父组件传递过来的属性和监听器。

Vue 3.x 向组件传递属性和监听器

在 Vue 3.x 的虚拟 DOM 中,事件监听器只是以on为前缀的属性。因此,监听器被归纳为$attrs 的一部分,从而移除了$listerners

<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

如果这个组件接收到一个 id 属性和一个 v-on: close 监听器,$attrs对象现在看起来如下:

{
  id: 'my-input',
  onClose: () => console.log('close Event triggered')
}

本系列目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值