前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue中的$attrs和$listener的使用

Vue中的$attrs和$listener的使用

作者头像
青年码农
发布2022-05-31 09:40:23
1.2K0
发布2022-05-31 09:40:23
举报
文章被收录于专栏:青年码农

前面讲了关于vue组件间数据传递,如果没有看过,关注公众号,有历史推荐,讲的比较详细,有代码,新手也能看懂,今天说一说attrs和listener。

疫情之前,在家关了这么久,也没怎么更新,最近在看大佬的项目,学习下新的思路。之前项目上,父子组件传递数据,都是用props去接收和this.emit触发父组件方法。这次我们用attrs和

$attrs

官方解释:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

通俗易懂的说就是用$attrs可以获取父组件传递过来的所有属性,不包含class,style和props中接收的。比如父组件:

代码语言:javascript
复制
// father组件
<template>
  <div id="father">
    <child prem="参数" @focus="fatherFn">
    </child>
  </div>
</template>

子组件我们还是用porps接收,代码就不贴了,如果子组件中又引用了其他组件,那我们常规做法是子组件中在通过设置属性再传递到孙子组件,或者用vuex,现在我们可以使用$attrs

代码语言:javascript
复制
// child组件
<template>
  <div id="child">
    <son v-bind="$attrs" v-on="$listener"></son>
  </div>
</template>

在son组件中,可以直接使用

代码语言:javascript
复制
// son组件
{{ $attrs.prem }}

或者用props接收

代码语言:javascript
复制
props: {
  prem:{
    type:String,
    default:"默认值"
  }
}

使用$attrs的好处是:

  • 在子组件中不用再通过props来接收来自父组件的信息
  • 在子组件中调用孙子组件,绑定$attrs,孙子组件就可以直接接收父组件的内容
  • 多层传递省时省力

$listener

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

$listeners,它是一个对象,里面包含了作用在这个组件上的所有监听器。

子组件打印

代码语言:javascript
复制
console.log(this.$listeners)

可以用对象解构

代码语言:javascript
复制
const { focus } = this.$listeners;

listeners的作用很明显,就是在高层组件像低层组件传参(上面讲到的attrs),或者其他方式,那低层组件如何向高层组件传递数据呢,用

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-05-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档