【provide和inject传值】

---

父子传值

在父组件中使用provide设置msg

<template>
  <div id="app">
    <h1>根组件</h1>
    <Pchild></Pchild>
  </div>
</template>

<script>
import Pchild from "@/components/Pchild.vue";
export default {
  name: "App",
  components: {
    Pchild,
  },
  provide:{
      msg:'儿子你要听话',
  },
};
</script>

在子组件中使用inject接收msg

<template>
  <div >
  <h3>{{msg}}</h3>
  <Sun></Sun>
  </div>
</template>

<script>
import Sun from '@/components/Sun.vue'
export default {
 name:"pchild",
    inject:['msg'],
    components:{
        Sun
    }
}
</script>

祖孙传值

在父组件中设置一个sunMsg值

在子组件中导入孙组件

在孙组件中使用inject存放sunMsg

特点：
可以父传子 也可以爷爷传孙子 可以向下传递
不可以兄弟之间传值，兄弟传值建议使用事件总线的方式