$listeners 的官方介绍:

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

用例

  <div id="app">
A{{msg}}
<my-button :msg="msg" @todo="handleClick"></my-button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script>
let vm = new Vue({
el: '#app',
data: {
msg: '100'
},
methods: {
handleClick () {
console.log('点击事件')
}
},
components: {
'MyButton': {
template: `<div @click="$listeners.todo">B</div>`,
created() {
console.log(this.$listeners) // 包含父级所有绑定的方法
}
}, }
})
</script>

上面代码中包含一个子组件和一个父组件,子组件需要调用父组件中的方法,可以通过 $listeners.方法名 形式调用。方法名必须在父组件中被定义,因为子组件是在父组件的模块中来使用的,通过$listeners 可以很好的用在多次传递方法

  <div id="app">
A{{msg}}
<my-button :msg="msg" @todo="handleClick"></my-button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script>
let vm = new Vue({
el: '#app',
data: {
msg: '100'
},
methods: {
handleClick () {
console.log('点击事件')
}
},
components: {
'MyButton': {
template: `<div>B<my-radio v-on="$listeners"></my-radio></div>`,
components: {
'MyRadio': {
template: `<div @click="$listeners.todo">C</div>`,
}
},
created() {
console.log(this.$listeners)
},
},
}
})
</script>

在面试中会经常问到父子通讯的方法有哪些,$listeners 可是其中的一种,推荐大家学习

【vue】中 $listeners 的使用方法的更多相关文章

  1. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  2. Vue(十二)vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...

  3. 在Vue中关闭Eslint 的方法

    在vue项目中关闭ESLint方法:找到 webpack.base.conf.js 将这些代码注释掉, { test: /\.(js|vue)$/, loader: 'eslint-loader', ...

  4. vue解决遮罩层滚动方法

    vue 遮罩层阻止默认滚动事件 在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class=& ...

  5. vue实例的属性和方法

    vue实例的属性和方法 1. 属性 vm.$el #指定要绑定的元素 vm.$data #Vue 实例的数据对象 vm.$options #获取自定义属性的值 new Vue({ customOpti ...

  6. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  7. vue中添加util公共方法&&ES6之import、export

    vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...

  8. vue中methods中的方法闭包缓存问题

    vue中methods中的方法闭包缓存问题 问题背景 需求描述 在路由的导航栏中需要, 判断是否为第一次点击 需要一个标志位来记录是否点击过 现状: 这个标志位只在一个函数中用过.不希望存放全局 希望 ...

  9. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  10. Vue 修饰符once的方法使用

    once:只执行一次 代码: <!doctype html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. 树结构关系的数据导出为excel

    该文针对的是关于树结构的数据的导出,每一个节点都可以创建不定数的子节点,在选择好某个节点进行导出 时,会把该节点以及子节点的数据都导出来.导出后的excel的格式大概如下图的形式,这个是一个比较理想 ...

  2. vue2.0项目实战(3)使用axios发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...

  3. 若要允许 GET 请求,请将 JsonRequestBehavior 设置为 AllowGet

    http://www.cnblogs.com/Steven7Gao/archive/2012/06/13/2547905.html 若要允许 GET 请求,请将 JsonRequestBehavior ...

  4. python高并发的解决方案

    一.cnd加速 简单说就是把静态资源放到别人服务器上 全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络 基本思路: 尽可能 ...

  5. Image.fromarray的用法

    简而言之,就是实现array到image的转换 详细参考以下博客 https://blog.csdn.net/ybcrazy/article/details/81206411

  6. java 中二维数组的定义和遍历

    定义格式 * a 第一种定义格式: * int[][] arr = new int[3][4];// arr里面包含3个数组 每个数组里面有四个元素 * 上面的代码相当于定义了一个3*4的二维数组,即 ...

  7. linux 用户登陆信息查询

    1.查看命令历史 每个用户都有一份命令历史记录 查看$HOME/.bash_history 或者在终端输入: history 2.last命令 查看用户登录历史 此命令会读取 /var/log/wtm ...

  8. C#设计模式 —— 依赖注入

    在说依赖注入之前,先了解下什么是接口. 接口的相关规则: 1. 接口是一个引用类型,通过接口可以实现多重继承. 2. C#中接口的成员不能有new.public.protected.internal. ...

  9. Linux shell 自动删除n天前日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  10. eclipse编译hbase 1.3.1(转)

    https://yq.aliyun.com/articles/59830   ,晚上回去试试...