Zenn
Closed1

Vue3 の composable function でコンポーネントに直接 Ref を渡す

Vue 3
いなにわうどんいなにわうどん

Vue3 の composable function でコンポーネントに対し、アンラップしない状態で直接 Ref を渡したい場合は computed で囲むと良い。

例えば、子コンポーネントで以下の props を受け取る場合を想定する。

interface Props {
  value: Ref<number>;
}
defineProps<Props>();

この場合、親コンポーネントでは下記のように記述する。

<Child :value="valueRef"/>

<script setup type="ts">
interface { computed, ref } from "vue";
const value = ref(0);

const valuerRef = computed(() => value);
</script>
このスクラップは2024/01/22にクローズされました