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

192 阅读 0 评论 127 点赞

我是靠谱客的博主阔达大叔，最近开发中收集的这篇文章主要介绍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 修饰符进行绑定成功