vue 新增 $attrs 与 $listeners 解释

2019年10月 20

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

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

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

 

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

HTML渲染之后html

 

        
 Enter your username
 
        
何冲很帅 
 
        
    

设置inheritAttrs: true html渲染如图

 

        
 Enter your username
 
        
你很帅哈 很帅