元件間通訊provide和inject

洛飞發表於2024-10-10
元件IDE

vue3提供兩種方法，分別為（爺爺提供）provide（提供）和（孫子）inject（注入）。

可以實現隔輩傳入資料，且孫子元件可以修改爺爺提供的資料。

即如果子元件再呼叫子元件，那麼父元件可以透過provide 和 inject來實現父孫志堅訊息通行。

①實現父子元件呼叫子元件， 子元件再呼叫子元件

②父元件透過provide孫子元件提供資料

import { ref,provide } from 'vue';
let car = ref('法拉利')
// 祖先元件給後代元件提供資料
// provide需要兩個引數  第一個引數:提供的資料key    第二個引數:祖先元件提供資料
provide("TOKEN", car)//注意 ，這裡是傳car不是car.value，如果傳car.value就不是響應式的了  下面的圖片是錯誤的，得更正

③孫子元件透過inject使用資料

import { inject } from 'vue';
// 注入祖先元件提供的資料  
// 需要的引數：祖先提供的資料

let car = inject('TOKEN')

④孫子元件修改父元件的資料

let car = inject('TOKEN')

const handler = ()=>{
  car.value = '飛機'
}

相關文章