Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

<テンプレート>
  <div>
  // 3: 子コンポーネントを使用し、v-model を使用して <About v-model="father"/> をバインドします。
  </div>
</テンプレート>

<スクリプト>
// 1: サブコンポーネントをインポートします。import About from "./About";
エクスポートデフォルト{
// 2: サブコンポーネントを登録する: {
    について、
  },
  データ（） {
      戻る {
      // 空の父親の値:''
      }
  },
  //コンポーネントデータの変更を監視する watch:{
      父(val){
          コンソールログ(val);
      }
  }
};
</スクリプト>

<テンプレート>
  <div>
  // 2: v-model を使用して <input type="text" v-model="son"> をバインドします。
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    // 1: 親コンポーネントから情報プロパティを受け取る: {
        価値：{
            タイプ:文字列、
            デフォルト：''
        }
    },
    データ（） {
        戻る {
        // 3: 空の値を代入する:''
        }
    },
    // 4: 変更をリッスンする watch:{
        // 息子に値を割り当てる   
        価値（）{
        // ここで this.value は props の値です
            this.son = this.value
        },
        // 親コンポーネントにsonを渡すson(){
            this.$emit('input',this.son)
        }
    }
}
</スクリプト>

価値（） {
      this.SonStaffPhoto = this.value
      console.log(this.SonStaffPhoto)
    }

息子スタッフ写真() {
      this.$emit('input', this.SonStaffPhoto)
    },