onProvider #

在组件中注入依赖

• Type #

  function onProvider(dependency: Dependency[]): void
  

• Details #

  在当前组件中注入依赖

  • 注意在 onProvider 中注入后，当前组件下的子组件也会拿到依赖，如果需要拿到最初的依赖，请在需要的页面上使用 onProvider 重新注入，并且通过 useDependency self 为 true 获取依赖

  • 如果需要在使用 onProvider 注入依赖后的组件中拿到依赖也需要通过 useDependency self 为 true 获取依赖

• Example #

  注入后获取自身依赖例子

  import { ref } from 'vue'
  export class CountService {
      count = ref(0)
      inc() {
          this.count.value++
      }
  }
  

  <script setup lang="ts">
  import { onProvider, useDependency } from 'vdi'
  
  import { CountService } from './count.service'
  
  //在setup中使用
  onProvider([[CountService]])
  
  //因为是从该组件注入，所以需要self来获取自身依赖
  const countService = useDependency(CountService, { self: true })
  </script>
  
  <template>
      父组件： {{ countService.count }}
      <button @click="countService.inc">count+</button>
  </template>
  

  子组件获取父组件注入例子

  <!--Child.vue -->
  <script setup lang="ts">
  import { onProvider, useDependency } from 'vdi'
  import { CountService } from './count.service'
  
  onProvider([[CountService]])
  //获取提供的依赖，不需要使用 self，因为父组件已经注入了依赖
  const countService = useDependency(CountService)
  //获取本身的依赖，虽然跟父组件是同一个，但是因为是自身重新注入的值也是不一样的
  const ChildCountService = useDependency(CountService, { self: true })
  </script>
  
  <template>
      <div class="child">
          子组件父值： {{ countService.count }}
          <button @click="countService.inc">count+</button>
  
          子组件自身值： {{ ChildCountService.count }}
          <button @click="ChildCountService.inc">count+</button>
      </div>
  </template>