Vue3 组件向下通信 祖孙组件的通信 provide与inject

介绍

当父子间通信可以使用props，祖孙使用provide（传递）或inject（接收），
这时不管组件套的多深都可以向下传递。

例子

现在有一个需求，把App.vue的数据传递到MusciPlay.vue里。

App.vue

爷爷

<template>
  <div>
    <MusicState></MusicState>
  </div>
</template>
<script setup>
import {provide, reactive} from 'vue'
import MusicState from "./components/MusicState.vue";
const userMessage =reactive({
  id:123,
  age:18,
  name:'生产队的驴'
})
  provide('userMessage', userMessage)
</script>

MusicState.vue

父亲

<template>
  <MusicPlay></MusicPlay>
</template>
<script setup>
import MusicPlay from "./MusicPlay.vue";
</script>

MusicPlay.vue

儿子 接收值

<template>
  {{userMessage}}
</template>
<script setup>
import {inject} from "vue";
const userMessage = inject('userMessage')
</script>

效果

正常接收到了，当然在孙组件了正常修改该值也都是响应式的。

协议书修改

  <button @click="userMessage.name=''">修改</button>