Vue组件传值之 $attrs 和 $listeners

最新推荐文章于 2024-09-12 22:47:29 发布

归小超

最新推荐文章于 2024-09-12 22:47:29 发布

阅读量939

点赞数

分类专栏： VUE 文章标签： VUE attrs listeners

本文链接：https://blog.csdn.net/weixin_42966484/article/details/89576018

版权

本文介绍了Vue中组件间传递非prop属性及事件的机制，重点讲解了$attrs和$listeners的作用。$attrs包含了父组件的所有非prop特性（除class和style），而$listeners则包含父组件的事件监听器。通过v-bind和v-on可以将这些属性和事件传递给子组件，对于构建复杂的组件层级关系十分有用。

摘要由CSDN通过智能技术生成

首先，我们先来看一下官方对$attrs 和 $listeners的解释：
$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
$listener：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

直接看代码吧：
在父组件当中，最外层组件

<template>
    <div>
        <Child1 :child1Info="child1" :child2Info="child2" v-on:test1="onTest1" v-on:test2="onTest2">
        </Child1>
    </div>
</template>
<script>
import Child1 from './child1';
export default {
    data() {
        return {
            child1:"hahha",
            child2:"asdsdasd"
        };
    },
    components: { Child1 },
    methods: {
        onTest1(msg) {
            console.log('test1 run