vue3 provide和inject

作用:实现祖孙组件之间的通信

实现:父组件中有一个provide选项来提供数据,后代组件中有一个inject选项来使用这些数据

1.祖组件中

import { provide} from 'vue'

export default { 
  name: 'App',
  setup(){
      let testData = reactive({name:'张三',age:18})
      provide('father',testData)
  }return {
        testData
    }
    
  }
}    

2.后代组件中

import { inject } from 'vue'

export default { 
  name: 'App',
  setup(){
      let getData =  inject('father')
  }
    return {
         getData
    }
    
  }
}    

 

posted @ 2021-12-21 16:21  初生土豆  阅读(49)  评论(0编辑  收藏  举报