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

介绍

当父子间通信可以使用props，祖孙使用provide（传递）或inject（接收），

这时不管组件套的多深都可以向下传递。

例子

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

App.vue

爷爷

  

    
  


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

MusicState.vue

父亲

  


import MusicPlay from "./MusicPlay.vue";

MusicPlay.vue

儿子 接收值

  {{userMessage}}


import {inject} from "vue";
const userMessage = inject('userMessage')

效果

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

协议书修改

  修改