Vue.js+Composition APIでの片方向バインディング(？)書き方がわかりません。

Question

前提

VueJS、Composition APIともに初心者です。
Visual Studio Code＋Eslint＋VolarでVueJSをお勉強しています。

実現したいこと

親コンポーネントから、子コンポーネントへ任意のタイミングで初期値を渡すのですが、
子コンポーネント側では、初期値として渡されたプロパティを更に変更可能としたいです。
ただ、いわゆる双方向バインディングは行わず、
親コンポーネントからは一方的に値を渡すだけの、片方向バインディング（？）を記述したいです。

上記内容について、記述方法をご存じの方がおられましたら、
ご教授頂けないでしょうか？

該当のソースコード

親コンポーネントは、子コンポーネントを配置し、ボタンで子コンポーネントの初期値を変更可能としています

<template>
  <div>
    <div>{{ "親モードは「" + mode + "」モードです" }}</div>

    <!-- 子モードの値を変更する -->
    <div>
      <button @click="mode = '追加'">追加</button>
      <button @click="mode = '編集'">編集</button>
      <button @click="mode = '照会'">照会</button>
    </div>
    <!-- 親モードは変えられたくないのでv-bindで渡す -->
    <ChildComponent :mode="mode" />
  </div>
</template>

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

type Mode = "" | "追加" | "編集" | "照会";

const mode = ref<Mode>("");
</script>

子コンポーネントで、プロパティ「mode」をそのままv-bindへ渡すことができなかったので、
computedでリアクティブ変数を用意してみたのですが。。。

<template>
  <div v-if="mode !== ''">{{ "子モードは「 " + refMode + "」モードです" }}</div>

  <!-- 自分のモードを変更する -->
  <select v-model="refMode">
    <option></option>
    <option>追加</option>
    <option>編集</option>
    <option>照会</option>
  </select>
</template>

<script setup lang="ts">
import { computed } from "@vue/reactivity";
import { defineProps, PropType } from "vue";
type Mode = "" | "追加" | "編集" | "照会";

const props = defineProps({
  mode: {
    type: String as PropType<Mode>,
    default: "",
  },
});

const refMode = computed(() => {
  return props.mode;
});
</script>

発生している問題・エラーメッセージ

上記コードでは、子コンポーネント側で値を変えようとすると以下のエラーが発生します。

reactivity.esm-bundler.js:1188 Write operation failed: computed value is readonly

computed で作成した変数はreadonlyなのですね。。。

試したこと

Writable Computedというのもあるようですが、
試したところ、エラーは発生しなくなりましたが、相変わらず子コンポーネントの値は変わりません。

// const refMode = computed(() => {
//   return props.mode;
// });
const refMode = computed({
  get() {
    return props.mode;
  },
  set() {
    // 親コンポーネントの値は変えたくないので何もしない
  },
});

そもそも、Computedで作成した変数をv-modelに渡すのがダメなのでしょうか？

Answer 1

refによって返されたmodeはmode.valueにしないと値を取得できないはずです。

refはイベントも継承させる働きを持つので、そのまま参照しようとしてもできないですよ。したがって、mode.valueを子コンポーネントに渡せば、そのままpropsから受け取れると思います。

Answer 2

親コンポーネントから、子コンポーネントへ任意のタイミングで初期値を渡すのですが、子コンポーネント側では、初期値として渡されたプロパティを更に変更可能としたいです。

コンポーネントでchildModeを定義し、onMounted()で値をコピーすればいいのでは。
https://ja.vuejs.org/api/composition-api-lifecycle.html#onmounted

<template>
  <div v-if="mode !== ''">{{ "子モードは「 " + childMode + "」モードです" }}</div>

  <!-- 自分のモードを変更する -->
  <select v-model="childMode">
  ...

type Mode = "" | "追加" | "編集" | "照会";

const childMode = ref<Mode>("");

const props = defineProps({
  mode: {
    type: String as PropType<Mode>,
    default: "",
  },
});

onMounted(() => {
  this.childMode = newMode // ??
})

もし、途中で値が変わるのであれば、ウォッチャー https://ja.vuejs.org/guide/essentials/watchers.html を使う、とか。

watch(mode, async (newMode, oldMode) => {
  this.childMode = newMode // ??
})

Comments

[hayashida]

早速の回答ありがとうございます！！

＞もし、途中で値が変わるのであれば、ウォッチャーを使う、とか。
ウォッチャーを使うのが正解なのですね。。。
なんか、微妙ですね。。。
子コンポーネントは、親コンポートン側の使われ方を意識した作りにしないといけなんですね。。。

今回の質問では、親コンポーネント側の変数を変えたくないので、v-bindで渡しているのですが、
場合によっては、親コンポーネント側の変数を変えたい（子コンポーネント側で変更された値に）場合もあり、
その時はv-modelでパラメータを渡すのだと思うのですが、
ご提示頂いたコードでは、v-modelで渡しても、親コンポーネント側の値は変わらないんですよね？

親コンポーネントからv-bindで渡せば（途中で値が変更できる）初期値として、
v-modelで渡せば双方向バインディングとして、
のような子コンポーネントは出来ないのでしょうか？

[FKM]

refによって返されたmodeはmode.valueにしないと値を取得できないはずです。

refはイベントも継承させる働きを持つので、そのまま参照しようとしてもできないですよ。したがって、mode.valueを子コンポーネントに渡せば、そのままpropsから受け取れると思います。