Vue uses provide and inject to realize the transfer of values between parent and descendant components

The parent component provideprovides data, and the child component/child-grandchild component uses the injectinjection data

Parent component

<template>
  <div>
    <navbar></navbar>
  </div>
</template>

<script>
import navbar from "../components/navbar";
export default {
     
     
  components: {
     
     
    navbar,
  },
  provide: {
     
     
    title: "详情标题",
  },
};
</script>

Subassembly

<template>
  <div>
    <div>{
   
   { title }}</div>
    <tab></tab>
  </div>
</template>

<script>
import tab from "../components/tab";
export default {
     
     
  components: {
     
     
    tab,
  },
  inject: ["title"],
};
</script>

Descendant components

<template>
  <div>{
   
   { title }}</div>
</template>

<script>
export default {
     
     
  inject: ["title"],
  mounted() {
     
     },
};
</script>

Guess you like

Origin blog.csdn.net/AK852369/article/details/115029616
Recommended