vue爷孙传值

vue爷孙传值"/>

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出来的事件。