【Vue3】v-modelを親子コンポーネントのフォーム要素で使う

やりたいこと

フォーム要素の子コンポーネントでの値の変更と、親要素で所持する値を同期。
下記に書くことは、 https://v3.ja.vuejs.org/guide/migration/v-model.html の内容のお勉強メモ。

Vue2のころのはなし

わたしの勘違いなら申し訳ないのですが、【Vue ver.2】では

親コンポーネントで値を設定、modelとしてリアクティブにテンプレート要素に渡す。
子コンポーネントで値を受け取り、propsは直接変更できないので、data(computed)に渡す。
子コンポーネントで値の変更を検知したら、親要素にemitで変更通知
親子コンポーネントで変更を受け取って、データに渡す

っていう流れが必要だった…と思ってます。

コードで書くと、こんな感じ。 (syncとか使えばまた違ってたんですね…　勉強不足。)

parent.vue

<template>  <FormsElInputText    :model="formdata.text"    placeholder="入力してください"    @changed="ChangeInputeTextText"  /></template><script>export default {  data () {    return {      formdata: {        text: null,      }    }  },  methods: {    ChangeInputeTextText (value) {      this.formdata.text = value    }  }}</script>

child.vue

<template>  <div class="control-input">    <input type="text" v-model="mval" />  </div></template><script>export default {  props: {    model: {type: String, required: false},  },  emits:['changed'],  computed: {    mval: {      get() {        if (this.model) {          return this.model        } else {          return null        }      },      set(nVal) {        this.$emit('changed', nVal)      }    }  }}</script>

Vue3で使う

Vue3ではなんだか、書き方がシンプルにできるようで、見慣れなくて戸惑ってます。
参考URLのところにあるような書き方を元からしていたら、そんなもんかと思えたような気もするのですが。

parent.vue

<template>  <div class="page">    <ElementsInputText      type="password"      placeholder="パスワードを入力してください"      v-model:inputText="inputText"    />  </div></template><script>export default {  data() {    return {      inputText: null,    }  }}</script>

childe.vue

<template>  <div class="control-input">    <input      type="text"      :value="inputText"      @input="$emit('update:inputText', $event.target.value)"    />  </div></template><script>export default {  props: {    inputText: {      type: String    }  },  emits: ['update:inputText'],}</script>

ちなみに

<ChildComponent v-model:PropName="BindingDataValue" />

は、

<ChildComponent :PropName="BindingDataValue" @update:PropName="BindingDataValue = $event" />

の省略形なのだそうで。