作用

• 在祖先组件中使用 provide 标记的变量可以被所有后代访问，无论多少层

• 在后代组件中使用 inject 可以访问到变量

  示例

• 祖先组件

  <script lang="ts">
  import { provide, ref } from 'vue'
  export default {
  name: 'App',
  setup(){
    const menuVisible = ref(true)
    provide('menuVisible',menuVisible)   // 类似于 setter
  }
  }
  </script>

• 后代组件

  <script lang="ts">
  import { inject, Ref } from "vue";
  export default {
  setup() {
    const menuVisible = inject<Ref<boolean>>("menuVisible");        
    // 类似于 getter   //<Ref<boolean>> 标明类型
    const toggleMenu = () => {
      menuVisible.value = !menuVisible.value;
    };
    return { toggleMenu };
  },
  };
  </script>