父组件通过provide
提供数据,子组件/子孙组件使用inject
注入数据
父组件
<template>
<div>
<navbar></navbar>
</div>
</template>
<script>
import navbar from "../components/navbar";
export default {
components: {
navbar,
},
provide: {
title: "详情标题",
},
};
</script>
子组件
<template>
<div>
<div>{
{ title }}</div>
<tab></tab>
</div>
</template>
<script>
import tab from "../components/tab";
export default {
components: {
tab,
},
inject: ["title"],
};
</script>
子孙组件
<template>
<div>{
{ title }}</div>
</template>
<script>
export default {
inject: ["title"],
mounted() {
},
};
</script>