inject-composition.uvue

<template>
  <view>
    <text>inject page</text>
    <text class="mt-10 msg">msg: {{msg}}</text>
    <text class="mt-10 num">num: {{num}}</text>
    <text class="mt-10 obj">obj: {{JSON.stringify(obj)}}</text>
    <text class="mt-10 arr">arr: {{JSON.stringify(arr)}}</text>
    <text class="mt-10 arr-0">arr[0]: {{ arr[0]}}</text>
    <text class="mt-10 fn">fn: {{fn?.()}}</text>
    <text class="mt-10 has-injection-context">hasInjectionContext:
      {{checkHasInjectionContextRes}}</text>
    <button class="mt-10 check-has-injection-context-btn" @click="checkHasInjectionContext">check
      hasInjectionContext</button>
  </view>
</template>

<script setup lang='uts'>
  const msg = inject<string>('msg')
  const num = inject('num')
  const obj = inject('obj')
  const arr = inject<number[]>('arr', [99])
  const fn = inject<() => string>('fn')

  const checkHasInjectionContextRes = ref('')

  const checkHasInjectionContext = () => {
    checkHasInjectionContextRes.value = `${hasInjectionContext()}`
  }
  checkHasInjectionContext()
</script>