傑森前端

vue3的provide inject其實和vue2差不多

在父組建上提供provide

可以是一個ref物件也可也是proxy物件也可以是一般的數據也可以是一個函式

子組建用inject接收

範例

#父
<script >
import HelloWorld from '@/components/HelloWorld.vue'
import { provide, reactive, ref } from 'vue'
export default {
  components: {
    HelloWorld
  },
  setup() {
    let msg = ref('msg')
    let person = reactive({
      name: 'jason'
    })
    provide('msg', msg)
    provide('person', person)
    provide('test', test)
    function test(){
      console.log('test')
    }
  }
}
</script>

<template>
  <HelloWorld></HelloWorld>
</template>

＃子
<script >
import { inject } from "@vue/runtime-core"
export default {
  setup(props, context) {
    let msg = inject('msg','deafultValue') //ref
    let person = inject('person','deafultValue') //proxy
    let test = inject('test','deafultValue') // func
    test()
    return {
      msg, person
    }
  }
}

</script>
<template>{{ msg }}{{ person }}</template>

總結

只要是後代的組件都可以拿到前代組建provide的東西