Vue2,带你探秘$attrs和$listeners

带你探秘$ attrs和$ listeners

$attrs

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

演示如下：

<script>
        let m2 = {
            props: ["c"],
            template: "
m2 -- {{c}}
",
            created() {
                console.log("m2------", this.$listeners)
                this.$listeners.f1()
            }
        }

        let m1 = {
            props: ["b"],
            template: '
m --- {{b}} -- 
',
            components: {
                m2,
            },
            created() {
                console.log("m1----",this.$props)
                console.log("m1----", this.$listeners)
            }
        }


        let son = {
            props: ["a"],
            template: "
son---  --- {{a}} ---
",
            components: {
                m1
            },
            mounted() {
                console.log(this.$props)
                console.log(this.$listeners)
            }
        }

        let father = {
            template: "
Father
",
            components: {
                son
            },
            data() {
                return {
                    a: 1,
                    b: 2,
                    c:3
                }
            },
            methods: {
                f1() {
                    console.log("f1")
                },
                f2() {
                    console.log("f2")
                },
                f3() {
                    console.log("f3")
                }
            }
        }

        const app = new Vue({
            el: "#app",
            components: {
                father
            },
            data: {

            }
        })
    </script>

v-bind="attrs"这里会接收所有自定义的绑定属性，并传递到本层，可以拿到里面任意的数据，但是拿了之后传入下一级的时候后面的则拿不到上一层拿走的属性。

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

代码如上，这里则不同每一层使用 v-on='$listeners'的标签都会接收到上一组件的所有方法，利用this.$listeners即可使用。并且不会影响后来的调用。