vue----$attr、$listeners

名词解释

• $attrs--继承所有的父组件属性（除了组件内prop属性、class 和 style ）
  
• inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承
  
• $listeners--属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

主要用途

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

代码示例

例一

class="">
    

    

    
    
复制代码

上面的例子渲染后的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属性

例二

假设A包含B，B包含C

A组件


复制代码

B组件


复制代码

C组件


复制代码

点击‘C组件的按钮’，执行A组件的方法