vue爷孙传值

爷传孙

1、v-bind="$attrs"
父组件A，子组件B，孙组件C。
A上设置值，若没在B上用props进行接收，则可以直接在B中的C设置v-bind="$attrs"，此时相当于把属性直接设置在C上。

// 爷（user.vue）
<user-info :toSun="sunData"></user-info>

data() {
    return {
        sunData: 123456789
    }
}


// 父（userInfo.vue）
<UserHeadInfo v-bind="$attrs"></UserHeadInfo>


// 孙（userHeadInfo.vue）
{{ toSun }}
props: {
    toSun: { type: Number, default: null },
}

---

孙传爷

2、v-on="$listeners"
父组件A，子组件B，孙组件C。
C组件中emit事件后，在B中可以直接使用v-on="$listeners"接收，此时可以在A组件中的B上直接使用C中emit出来的事件。