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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。这篇文章主要介绍了vue的keep-alive中使用EventBus的方法,需要的朋友可以参考下2019-04-04
cube-ui 是基于 Vue.js 实现的精致移动端组件库，由于很长一段时间没有学习cube-ui 的功能实现示例代码了，今天通过本文给大家介绍下Vue2使用cube-ui 实现搜索过滤、高亮功能，感兴趣的朋友跟随小编一起看看吧2023-01-01
Element-UI中关于table表格的那些骚操作(小结)
这篇文章主要介绍了Element-UI中关于table表格的那些骚操作(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue实现表单单独移除一个字段验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了Vue3如何利用vuedraggable实现动态配置页面,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考一下2023-12-12
这篇文章主要介绍了vue3.2中的vuex使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了用vue 实现手机触屏滑动的功能，文中通过示例代码给大家介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了富文本编辑器vue2-editor实现全屏功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
el-table多选toggleRowSelection不生效解决方案
这篇文章主要给大家介绍了关于el-table多选toggleRowSelection不生效的解决方案,文中通过图文以及代码将解决办法介绍的非常详细,需要的朋友可以参考下2023-08-08
相信大家做项目的时候,功能中都有导出模块,下面这篇文章主要给大家介绍了关于vue导出excel表格的详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
最新评论