January 1, 2024 vue

Cara Mengakses Ref Yang Ada di Child Component Vue 3 Composition API

An exception here is that components using <script setup> are private by default: a parent component referencing a child component using <script setup> won’t be able to access anything unless the child component chooses to expose a public interface using the defineExpose macro: https://vuejs.org/guide/essentials/template-refs#ref-on-component

Artinya, ref yang ada di child component yang menggunakan <script setup> atau composition api harus di-expose dulu menggunakan defineExpose agar bisa diakses dari luar component.

defineExpose adalah compiler macro pada vue untuk meng-expose properti pada componetn <script setup> atau composition api.

Misal terdapat component FormControl.vue.

<script setup>
import { ref } from 'vue';

const input = ref(null)
</script>

<template>
  <input ref="input" type="text" />
</template>

Jika saya ingin membuat ref input dapat diakses dari luar component FormControl. Maka ref input harus dimasukkan ke defineExpose.

<script setup>
import { ref } from 'vue';

const input = ref(null)

defineExpose({ input })
</script>

<template>
  <input ref="input" type="text" />
</template>

Dengan ini, ref input sekarang sudah bisa diakses dari luar component, contoh di App.vue.

<script setup>
import { ref, onMounted } from 'vue';
import FormControl from './FormControl.vue';

const formControl = ref()

onMounted(() => formControl.value.input.focus())
</script>

<template>
  <FormControl ref="formControl" />
</template>

Sumber