typescript - Hämta props från templatreferens

Är det möjligt att få egenskaperna hos en Vue-komponent via en template-ref? Jag skulle kunna använda defineExpose men jag är intresserad av om det finns en annan lösning. Jag använder Vue 3 composition API.

<script setup lang="ts">
const childRef = ref()

const foo = () => {
  console.log(childRef.value.someData)
}
</script>

<template>
  <Child ref="childRef" some-data="my special data" />
</template>

<style scoped lang="scss"></style>

Svar #1

Lägger till ett annat svar med hjälp av defineExpose-API:et.

Först behöver du exponera egenskaperna hos barnkomponenten som du vill få åtkomst till i föräldrakomponenten via ref-metoden.

I ditt fall, eftersom du vill få åtkomst till egenskaperna hos barnkomponenten, behöver du exponera egenskaperna med defineExpose-API:et.

Child.vue
<script setup lang="ts">
import { defineExpose } from "vue";
  
const props = defineProps({
  someData: String
})

defineExpose({
  props,
})
</script>

<template>
  {{ someData }}
</template>

<style scoped lang="scss"></style>

parent.vue
<template>
  <Child ref="childRef" some-data="my special data" /><br><br>
  <v-btn @click="foo">Access Child Component Properties</v-btn>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'

const childRef = ref()

const foo = () => {
  console.log(childRef.value?.props?.someData)
}
</script>

Här är en fungerande demo.

Svar #2

Ett sätt är att använda defineComponent-API:et och binda childRef-mallreferensen till Child-komponenten med hjälp av ref-attributet. Till exempel-

const childRef = ref<typeof Child>()

Vi behöver också importera Child-komponenten med defineComponent-funktionen så att vi kan använda den i komponentalternativet.

parent.vue
<template>
  <Child ref="childRef" some-data="my special data" /><br><br>
  <v-btn @click="foo">Access Child Component Properties</v-btn>
</template>

<script setup lang="ts">
import { ref, defineComponent } from 'vue'
import Child from './Child.vue'

const childRef = ref<typeof Child>()

const foo = () => {
  console.log(childRef.value?.someData)
}
  
defineComponent({
  components: {
    Child,
  },
  setup() {
    return {
      childRef,
      foo
    }
  },
})
</script>


child.vue
<script setup lang="ts">
const props = defineProps({
  someData: String
})
</script>

<template>
  {{ someData }}
</template>

<style scoped lang="scss"></style>

Här är en fungerande demo.

Relaterade artiklar