Vue3 provide + inject

provide：提供一个值，可以在应用中的所有后代组件中注入使用。

官方文档：应用实例 API | Vue.js

应用实例 API | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/api/application.html#app-provide

使用示例

祖先组件

<script lang="ts" setup>
  import { ref, provide } from 'vue';
  
  const testTitle = ref<string>('这是标题');

  provide('testTitle', testTitle);
</script>

后代组件

<script lang="ts" setup>
  import { ref, inject } from 'vue';

  const testTitle = inject('testTitle');

  console.log(testTitle); // 这是标题

</script>

 欢迎扫码下方二维码关注VX公众号