provide inject defineExpose defineAsyncComponent

父组件

  import { ref, reactive, onMounted, provide } from 'vue';
  
  import 子组件名 from 'path'
  <zi ref='main'><zi>
  onMounted(()=>{
    console.log(main.value.str); //子>父
  })
  
  
  provide("str",ref(1));//父》子
  
  
 // defineAsyncComponent 用到时才会引入
 import { defineAsyncComponent } from 'vue';
 const Categories2 = defineAsyncComponent(() => import('@/components/categories2.vue'));

子组件

import { ref, reactive, onMounted, provide } from 'vue';
{{ str }}
let str = inject('str').value 
console.log(str)

let a=ref('1')
 defineExpose({ //子》父
     a,
 })