vue使用provide和inject实现父组件与子孙组件传值

父组件通过​​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>