Vue.js 3: スクリプトセットアップ内でpropsの値を取得し、関数で使用する方法

1. コンポーネントのプロパティを直接アクセスする方法

スクリプトセットアップ内でpropsオブジェクトにアクセスし、プロパティの値を取得できます。これにより、その値を関数内で使用することができます。

<script setup>
  import { ref } from 'vue';
  const props = defineProps(['propName']);
  const propNameValue = ref(props.propName);
  // 関数内でpropsの値を使用する例
  function myFunction() {
    console.log(propNameValue.value);
    // プロパティの値を使用した処理
  }
</script>

2. watchEffectを使用してpropsの変更を監視する方法

watchEffectを使用すると、propsの値の変更を監視し、関数内でその値を使用することができます。

<script setup>
  import { ref, watchEffect } from 'vue';
  const props = defineProps(['propName']);
  const propNameValue = ref(props.propName);
  watchEffect(() => {
    console.log(propNameValue.value);
    // プロパティの値を使用した処理
  });
</script>

3. computedプロパティを使用する方法

computedプロパティを使用すると、propsの値を関数内で使用する際に便利です。

<script setup>
  import { computed, defineProps } from 'vue';
  const props = defineProps(['propName']);
  const computedPropValue = computed(() => {
    return props.propName;
  });
  // 関数内でcomputedプロパティの値を使用する例
  function myFunction() {
    console.log(computedPropValue.value);
    // プロパティの値を使用した処理
  }
</script>

これらの方法を使用することで、Vue.js 3のスクリプトセットアップ内でpropsの値を取得し、関数で使用することができます。適切な方法を選択し、コンポーネントの要件に合わせて使用してください。