脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue $attrs $listeners

Vue中$attrs与$listeners的使用教程

 更新时间：2021年11月29日 14:29:03   作者：热心的前端人员  
这篇文章主要介绍了Vue中$attrs与$listeners的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

介绍

$attrs

继承所有的父组件属性（没有通过 props 接收的属性还有 class 类名 和 style 样式 ）。

inheritAttrs：

是否非 props 属性显示在标签最外层，默认值 true ，就是继承所有的父组件属性（除了 props 特定绑定外）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性就设置 inheritAttrs: false  ,但是 class 还是会继承。

$listeners

它是一个对象，能接收所有的方法绑定，里面包含了作用在这个组件上的所有监听器，配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

举例

父组件中 

<template>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</template>
 
<script>
import Son from "./components/son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
};
</script>
 
<style></style>

子组件中

<template>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</template>
 
<script>
import Son from "./components/son.vue";
export default {
  name: "App",
  components: {
    Son,
  },
};
</script>
 
<style></style>

可见，当 inheritAttrs 默认 false 时，属性是传入到子组件最外层的

当 inheritAttrs 为 true 后

当使用props接收属性时，属性就不会被显示

总结：组件标签上传入的属性如果子组件没有接收会跑到子组件标签最外层。

非 props 属性可以通过 $attrs 接收 {属性名：属性值}

<template>
  <div>
    <img v-bind="$attrs" alt="" />
  </div>
</template>
 
<script>
export default {
  inheritAttrs: false,
};
</script>
<style scoped>
.img {
  width: 100px;
  height: 100px;
}
</style>

当给子组件绑定点击事件时，是不会触发点击事件的，可以使用 .native 修饰符进行绑定成功

或者通过 $listeners 进行接收所有方法的绑定

子组件内

结果

总结 

所有非props属性都可以通过$attrs接收

使用：v-bind="$attrs" 将所有非props属性绑定到相应标签，也可以用于组件

所有组件上的方法绑定子组件都可以通过$listeners接收

使用：v-on="$listeners"将所有方法又绑定到组件相应标签，也可以用于组件

到此这篇关于Vue中$attrs与$listeners的使用教程的文章就介绍到这了,更多相关Vue $attrs $listeners内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 手把手教你使用vue-cli脚手架(图文解析)

    手把手教你使用vue-cli脚手架(图文解析)

    本篇文章主要介绍了手把手教你使用vue-cli脚手架(图文解析)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue移动端项目缓存问题实践记录

    vue移动端项目缓存问题实践记录

    最近在做一个vue移动端项目，被缓存问题搞得头都大了，积累了一些经验，特此记录总结下，分享到脚本之家平台，对vue移动端项目缓存问题实践记录感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • vue3项目+element-plus:时间选择器格式化方式

    vue3项目+element-plus:时间选择器格式化方式

    这篇文章主要介绍了vue3项目+element-plus:时间选择器格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Element Card 卡片的具体使用

    Element Card 卡片的具体使用

    这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue elementUI tree树形控件获取父节点ID的实例

    vue elementUI tree树形控件获取父节点ID的实例

    今天小编就为大家分享一篇vue elementUI tree树形控件获取父节点ID的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VUE使用canvas绘制管线管廊实现思路

    VUE使用canvas绘制管线管廊实现思路

    这篇文章主要为大家介绍了VUE使用canvas绘制管线管廊实现思路详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • Vue中computed及watch区别实例解析

    Vue中computed及watch区别实例解析

    这篇文章主要介绍了Vue中computed及watch区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 在Vue中进行数据分页的实现方法

    在Vue中进行数据分页的实现方法

    在前端开发中,数据分页是一个常见的需求,特别是当处理大量数据时,Vue作为一款流行的JavaScript框架,提供了强大的工具和生态系统来实现数据分页,本文将介绍如何在Vue中进行数据分页,以及如何设计一个通用的分页组件,需要的朋友可以参考下
    2023-10-10
  • vue项目前端加前缀(包括页面及静态资源)的操作方法

    vue项目前端加前缀(包括页面及静态资源)的操作方法

    这篇文章主要介绍了vue项目前端加前缀(包括页面及静态资源)的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • VUE 组件的计算属性详解

    VUE 组件的计算属性详解

    这篇文章主要介绍了VUE组件的计算属性详解，使用计算机属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算机属性，除非你不希望得到缓存，下文来了解具体详情
    2022-06-06

最新评论