App.vue
<template>
<div id="app">
<CompA :foo="'foo'" :bar="'bar'" :bar1="'bar1'" />
</div>
</template>
<script>
import CompA from "./components/CompA";
export default {
name: "App",
components: {
CompA,
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
子组件CompA:
<template>
<div>
<div>CompA</div>
<CompB :heheh="'hehe'" v-bind="$attrs" />
</div>
</template>
<script>
import CompB from "./CompB";
export default {
name: "compa",
props: ["foo", "bar"],
components: {
CompB,
},
mounted() {
console.log("compa:", this.$attrs);
},
};
</script>
<style>
</style>
子组件CompA里面的子组件CompB:
<template>
<div>
<div>CompB</div>
</div>
</template>
<script>
export default {
name: "compb",
mounted() {
console.log("compb:", this.$attrs);
},
};
</script>
<style>
</style>
$attrs 是一个内置属性,指父组件传递的、除了自己定义的 props 属性之外的所有属性