名词解释

inheritAttrs:

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。

注意:这个选项不影响 class 和 style 绑定。

什么意思呢,就是说在父组件中使用了子组件,在子组件中绑定了一个或多个属性,就是像<child a="b" :c="d"></child>

注意两种绑定方式。如果在子组件中没有申明使用a或者b,那么默认情况下会生成类似<div a="b" c="12"></div>这样的节点。如果使用了props: ['a'], 那么只有c=“d”会出现在div节点上。

下面有具体的例子。

$attrs:

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

和上面差不多一个意思。只是class和style不在这个里面。

$listeners:

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 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>
 


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

VUE中常用的十大过滤器知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。