Vyhledávání na webu

typescript - Získat vlastnosti z referenční šablony

Je možné získat vlastnosti komponenty Vue pomocí odkazového ref ve šabloně? Mohu použít defineExpose, ale zajímá mě, jestli existuje jiné řešení. Používám 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>

Odpověď č. 1

Přidání další odpovědi pomocí API defineExpose.

Nejprve je potřeba zpřístupnit vlastnosti dětské komponenty, ke kterým chcete v rodičovské komponentě přistupovat pomocí metody ref.

Ve vašem případě, pokud chcete přistupovat k vlastnostem (props) dětské komponenty, musíte tyto vlastnosti zpřístupnit pomocí API defineExpose.

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>

Zde je funkční ukázka.

Odpověď č. 2

Jedním z přístupů je použít API defineComponent a přiřadit childRef šablonový ref komponentě Child pomocí atributu ref. Například-

const childRef = ref<typeof Child>()

Také potřebujeme importovat komponentu Child pomocí funkce defineComponent, abychom k ní mohli přistupovat v možnosti components.

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>

Zde je funkční ukázka.

Související články