可以向孙子组件透传 props 而不必一级一级的传递。
Demo
App.vue(顶级组件)
<template>
<div id="app">
<p>App Component</p>
<BComponent msg="来自App组件的数据"/>
</div>
</template>
<script>
import BComponent from './components/BComponent.vue'
export default {
components: {
BComponent
}
}
</script>
BComponent.vue(注意这里没有写 msg 的 props 声明,也不能写,如果写了则无法使用 $attrs 将该 prop 传给后代)
<template>
<div>
<p>B Component</p>
<CComponent v-bind="$attrs"/>
</div>
</template>
<script>
import CComponent from './CComponent';
export default {
components: {
CComponent
}
};
</script>
CComponent.vue
<template>
<div>
<p>C component</p>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: 'test'
}
}
};
</script>
官方文档
vm.attrs(opens new window) :包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class
和 style
除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class
和 style
除外),并且可以通过 v-bind="attrs"
传入内部组件——在创建高级别的组件时非常有用。
vm.listeners(opens new window) :包含了父作用域中的 (不含 .native
修饰器的) v-on
事件监听器。它可以通过 v-on="listeners"
传入内部组件——在创建更高层次的组件时非常有用。
正文结束
Ctrl + Enter