Vue 新增的$attrs与$listeners的详解

tianyawhl

发布于 2019-04-04 10:39:43

2.5K0

发布于 2019-04-04 10:39:43

名词解释

inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承（简单的说，inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性）

$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上，如第一个例子的<input v-bind="$attrs"/>

$listeners--属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

主要用途

用在父组件传递数据给子组件或者孙组件

例1

<body class="">
    <div id="app" class="demo">
        <base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated"></base-input>
    </div>
    <script src="js/vue-2.5.13.js"></script>
    <script>
    Vue.component("base-input", {
        inheritAttrs: false, //此处设置禁用继承特性 （只继承class属性）
        props: ["label"],
        template: `
        <label>
          {{label}}
          {{$attrs.placeholder}}
          {{$attrs["data-date-picker"]}}
          <input v-bind="$attrs"/>
        </label>
        `,
        mounted: function() {
            console.log(this.$attrs);
        }
    })
    const app = new Vue({
        el: '#app',
        data: {

        }

    });
  
    </script>
</body>

上面的例子渲染后的HTML如下：

<label class="username-input">
    姓名 
    Enter your username 
    activated
    <input placeholder="Enter your username" data-date-picker="activated">
</label>

如果把上面例子中的inheritAttrs: false去掉或者改为inheritAttrs: true，最终渲染为：

<label placeholder="Enter your username" data-date-picker="activated" class="username-input">
    姓名
    Enter your username
    activated
    <input placeholder="Enter your username" data-date-picker="activated">
</label>

同时子组件可以单独使用$attrs，如上面的{{$attrs.placeholder}}依然是继承父组件的placeholder属性

例2：假设有三个组件A组件包含B,B组件包含C组件

A组件（App.vue）
<template>
    <div id="app">
        <child1 :p-child1="child1" :p-child2="child2" v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发 v-on:test2="onTest2">
        </child1>
    </div>
</template>
<script>
import Child1 from './Child1.vue';
export default {
    data() {
        return {};
    },
    components: { Child1 },
    methods: {
        onTest1() {
            console.log('test1 running...');
        },
        onTest2() {
            console.log('test2 running');
        }
    }
};
</script>

B组件（Child1.vue）
<template>
    <div class="child-1">
        <p>in child1:</p>
        <p>props: {{pChild1}}</p>
        <p>$attrs: {{$attrs}}</p>
        <hr>
        <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
        <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
        <child2 v-bind="$attrs" v-on="$listeners"></child2>
    </div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
    props: ['pChild1'],
    data() {
        return {};
    },
    inheritAttrs: false,
    components: { Child2 },
    mounted() {
        this.$emit('test1');
    }
};
</script>

C 组件 (Child2.vue)
<template>
    <div class="child-2">
        <p>in child2:</p>
        <p>props: {{pChild2}}</p>
        <p>$attrs: {{$attrs}}</p>
        <hr>
    </div>
</template>
<script>
export default {
    props: ['pChild2'],
    data() {
        return {};
    },
    inheritAttrs: false,
    mounted() {
        this.$emit('test2');
    }
};
</script>

我的个人网站-前端之攻略

微信号：前端之攻略

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018/05/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html