vue多层级组件嵌套传参v-bind="$attrs" v-on="$listeners"

Vue v2.4新增$attrs $listeners

直接上案例：

html：

<div id="app">
    <child1
            :p-child1="child1"
            :p-child2="child2"
            :p-child-attrs="1231"
            v-on:test1="onTest1"
            v-on:test2="onTest2">
    </child1>
</div>

js：

Vue.component("Child1", {
    inheritAttrs: true,
    props: ["pChild1"],
    template: `
    <div class="child-1">
    <p>in child1:</p>
    <p>props: {{pChild1}}</p>
    <p>$attrs: {{this.$attrs}}</p> //除了class、style和props，这里都能获取到父组件传来的值{ "p-child2": "pChild2的值", "p-child-attrs": 1231 }
    <hr>
    <child2 v-bind="$attrs" v-on="$listeners"></child2></div>`,
    mounted: function() {
        this.$emit("test1");
    }
});

Vue.component("Child2", {
    inheritAttrs: true,
    props: ["pChild2"],
    template: `
    <div class="child-2">
    <p>in child->child2:</p>
    <p>props: {{pChild2}}</p>
    <p>$attrs: {{this.$attrs}}</p>
      <button @click="$emit('test2','按钮点击')">触发事件</button>
    <hr> </div>`,
    mounted: function() {
        this.$emit("test2");
    }
});

const app = new Vue({
    el: "#app",
    data: {
        child1: "pChild1的值",
        child2: "pChild2的值"
    },
    methods: {
        onTest1() {
            console.log("test1 running...");
        },
        onTest2(value) {
            console.log("test2 running..." + value);
        }
    }
});

https://www.jianshu.com/p/a388d38f8c69