怎么理解vue中$listeners属性?

news/2024/7/10 2:40:37 标签: vue, $listeners

首先,$listeners是什么?

假设有父组件Parent和子组件Child

// Parent
<template>
  ...
  <child v-on:event-one="methodOne" v-on:event-two="methodTwo" />
  ...
</template>

那么你在使用Child时,传入的所有v-on事件都可以在$listeners对象中找到。

// Child
created () {
  console.log(this.$listeners) // { 'event-one': f(), 'event-two': f() }
}

所以,官方示例中的computed -> inputListeners就是把用户使用base-input组件时传入的v-on方法收集起来了。
然后通过v-on="inputListeners"的形式,转发给了input框。

注:v-on="{a: f()}"等价于v-on:a="f()"

所以官网才会说base-input是一个透明包裹器,因为它确实只是转发了父组件传入的参数给input元素。


http://www.niftyadmin.cn/n/886784.html

相关文章

vue实例之组件开发:图片轮播组件

一、普通方式&#xff1a; 其中&#xff0c;index是关键。 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <style> html, body{margin: 0;padding: 0; } .photo-player{width: 456px;height: 670px;over…

vue实例之组件开发:多标签切换组件/tabs切换组件

一、自定义方式&#xff1a; 定义组件Tabs.vue <template><div class"tabs"><button v-for"(tab, key) in tabs" :key"key" click"indexkey" :class"{active: keyindex}">{{tab}}</button><ul…

go 切片及其基本操作

1.1切片 Go中常用的数据结构是切片&#xff0c;即动态数组&#xff0c;其长度并不固定&#xff0c;我们可以向切片中追加元素&#xff0c;它会在容量不足时自动扩容。 在 Go 语言中&#xff0c;切片类型的声明方式与数组有一些相似&#xff0c;不过由于切片的长度是动态的&am…

vue插件开发的两种方法:以通知插件toastr为例

方法一&#xff1a; 1、写插件&#xff1a; 在 src 文件夹下面建 lib 文件夹用于存放插件&#xff0c;lib 文件夹下再建toastr文件夹&#xff0c;在toastr文件夹下新建 toastr.js 和 toastr.vue两个文件。整个项目目录如下所示&#xff1a; toastr.vue 的内容如下&#xff1a…

webuploader如何判断是否上传的是空文件?

在beforeFileQueued事件中可以判断&#xff1a; // 当有文件被添加进队列的时候 uploader.on( beforeFileQueued, function( file ) {if(file.size 0){alert("请不要上传空文件");} });

ztree中如何通过点击节点文字就可以选中节点前的选择框,并且父级和子级之间进行选择联动?

配置信息如下&#xff1a; var UsersTreeSetting {check : {enable : true,chkboxType : {"Y" : "ps","N" : "ps"}},view : {dblClickExpand : false,selectedMulti: false},data : {simpleData : {enable : true}},callback : {bef…

vue实例之组件开发:购物车实现

效果图 文件目录 Index.vue&#xff1a; <template><div class"shopping"><Header /><Itemv-for"item in items":key"item.id":item"item"change-number"changeNumber"/><Footer :items"…

vue实例:实现数据的增删改查(纯前端)

<template><div class"container"><div class"input-bar"><table><tbody><td>标题&#xff1a;</td><td><input type"text" v-model"addObj.title"/></td><td>发布…