vue 新增 $attrs 与 $listeners 解释

2019年10月 20

一、$attrs $inheriAttrs
$attrs --可以继承所有的父级组件的属性（除props、class、style）
$inheritAttrs : 默认状态为true， 继承所有父级组件的属性（除props所绑定的）添加到子组件的根元素上， 状态为false，则不会继承父级组件的属性（class属性仍然会渲染）

$listeners–属性，它是一个对象，里面包含了作用在这个组件上的所有函数事件监听器，你就可以配合 v-on=“listeners” 将所有的事件监听器指向这个组件的某个特定的子元素

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

 <div id="app">
        <my-component placeholder="Enter your username" datalist="何冲很帅" :content="content"  :title="title">{{content}}</my-component>
    </div>
    Vue.component("my-component", {
            inheritAttrs: false, //此处设置禁用继承特性
            props: ['title','content'],
            created () {
                console.log(this.$attrs)
            },
            template: `  <div>  
                            <div> {{$attrs.placeholder}}</div>
                            <div>{{$attrs.datalist}} </div>
                             <input v-bind="$attrs" />
                        </div> `,
        })
        const vm = new Vue({
            el: '#app',
            data: {
                content: '我是何冲',
                title: '我是标题'
            },
        })

HTML渲染之后html

 <div placeholder="Enter your username" datalist="一个字 很帅">
        <div> Enter your username</div> 
        <div>何冲很帅 </div> 
        <input placeholder="Enter your username" datalist="何冲很帅">
    </div>

设置inheritAttrs: true html渲染如图

 <div placeholder="Enter your username" datalist="一个字 很帅">
        <div> Enter your username</div> 
        <div>你很帅哈 很帅 </div> 
        <input placeholder="Enter your username" datalist="何冲很帅">
    </div>