vue3中provide/inject的使用 跨级组件通讯

使用

provide 用于顶层组件
inject 用于底层组件
* 不能在方法中接收

参数

function event() {}
const param = reactive({event,str:'字符串'})
provide('communication',param)
inject('communication')

顶层组件可以向下传事件/参数等
底层组件可以通过接收的事件来触发顶层组件中的事件

demo

嵌套层级
Root
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

代码
const app = Vue.createApp({})

app.component('todo-list', {
  data() {
    return {
      todos: ['Feed a cat', 'Buy tickets']
    }
  },
  provide: {
    user: 'John Doe'
  },
  template: `
    <div>
      {{ todos.length }}
      <!-- 模板的其余部分 -->
    </div>
  `
})

app.component('todo-list-statistics', {
  inject: ['user'],
  created() {
    console.log(`Injected property: ${this.user}`) // > 注入 property: John Doe
  }
})