$attrs 和 $listeners & inheritAttrs 的理解

$attrs: 当组件在调用时传入的属性没有在props里面定义时，传入的属性将被绑定到$attrs属性内（class与style除外，他们会挂载到组件最外层元素上）。并可通过v-bind="$attrs"传入到内部组件中
(可以理解为父组件向子组件中传递的属性，但是在子组件的props中未定义的属性，会被传递到$attrs中，通过v-bind='$attrs',就可以向子组件的组件中传递属性了)


$listeners: 当组件被调用时，外部监听的这个组件的所有事件都可以通过$listeners获取到。并可通过v-on="$listeners"传入到内部组件中。
（理解同上）

使用例子：
<!---使用了v-bind与v-on监听属性与事件-->
<template>
    <el-dialog :visible.sync="visibleDialog" v-bind="$attrs" v-on="$listeners">
    <!--其他代码不变-->
    </el-dialog>
</template>
<script>
  export default {
    //默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 
    //将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。
    //通过设置 inheritAttrs 到 false，这些默认行为将会被去掉
    inheritAttrs: false
 }
</script>

<!---外部使用方式-->
<custom-dialog
  :visible.sync="visibleDialog"
  title="测试弹框"
  @opened="$_handleOpened"
>
  这是一段内容
</custom-dialog>

作者：前端进击者
链接：https://juejin.im/post/5eddbaee5188254344768fdc
来源：掘金

以上内容来自掘金链接：https://juejin.im/post/5eddbaee5188254344768fdc

inheritAttrs？ --------- 解释如下：

inheritAttrs:false 是否允许组件绑定的未注册属性渲染到组件根节点上的

                              true -- 代表允许（默认是true）, false -- 代表不允许

 

如果使用了 $attrs 的组件中如果未声明 inheritAttrs ( 或者 inheritAttrs的值为true )

// 父组件内：

<!--父组件内如下-->
<template>
    <div class="container">
        <my-test :count="count" :max="max" @click="click"></my-test>
    </div>
</template>
<script>
//components 
import MyTest from '@/components/test/MyTest'
export default {
    components: {
        MyTest
    },
    data() {
        return {
            count: 0,
            max: 50
        }
    },
    methods: {
        click() {
            alert('click button');
        }
    }
}
</script>
<style lang="less" scoped>

</style>

//子组件(名为MyTest.vue)内：

<!-- MyTest.vue -->
<template>
    <div class="ctn">
        <button v-bind="$attrs" v-on="$listeners">test button</button>
    </div>
</template>
<script>
    export default {

    }
</script>
<style lang='less' scoped>
    .ctn{
        
    }
</style>

 

运行结果如下，在子组件的根节点上也渲染了$attrs中的属性，（click方法也被绑定到了button按钮中，inheritAttrs不会影响$listeners的渲染位置）

 

如果在使用了$attrs的子组件中声明了 inheritAttrs: false 

即：

<!-- MyTest.vue -->
<template>
    <div class="ctn">
        <button v-bind="$attrs" v-on="$listeners">test button</button>
    </div>
</template>
<script>
    export default {
        inheritAttrs: false
    }
</script>
<style lang='less' scoped>
    .ctn{
        
    }
</style>

结果如下：