假定自定义了一个组件 ComponentB, props 接收了name, age两个参数, ComponentA在调用ComponentB时这么调用:
<componentB
:name="_name"
:age="_age"
:address="_address"
:phone="_phone"
@playBall="_playBall"
@study="_study"
>
而ComponentB又调用了ComponentC, 若想在ComponentC获取ComponentA传输过来的没被ComponentB接收的非props数据,则组件ComponentB可以这么写:
<template>
<div v-bind="$attrs" v-on="$listeners"></div>
<componentC />
</template>
<script>
export default {
indeterminate: true,
props: {
name,
age
}
则在ComponentC中,可以通过vm.$attrs
获取祖先组件传输的数据, 通过vm.$listeners获取祖先节点的methods,栗子:
<template>
</template>
<script>
export default {
mounted () {
// 访问ComponentA传入的`phone`, ComponentB的props并未接收
console.log(this.$attrs.phone)
// 触发ComponentA绑定`study`事件, 并非ComponentB emit的
this.$emit('study')
}
}