Vueコンポーネントのカスタムイベントの詳細な説明

<テンプレート>
  <div> 要素
    <h2>{{メッセージ}}</h2>
    <!-- 関数型のデータ プロパティを親コンポーネントから子コンポーネントに渡すことで実装されます。子コンポーネントがデータを親コンポーネントに渡します -->
<学校:getName="getName"/>
<生徒:getStudentname="getStudentname"/>
<!-- 親コンポーネントを介して子コンポーネントにカスタム イベントをバインドします。子から親へのデータ転送を実現します -->
<年齢 v-on:elderSex="demo"/>
<!-- 親コンポーネントを介して子コンポーネントにカスタム イベントをバインドします。子は親にデータを渡します (2 番目の書き方: ref を使用) -->
   <!-- <学生 ref="学生"/> -->
  </div>
</テンプレート>
<スクリプト>
'./components/School.vue' から School をインポートします。
'./components/Student.vue' から Student をインポートします。
'./components/Age.vue' から Age をインポートします。
エクスポートデフォルト{
名前:'アプリ',
コンポーネント:{学校、生徒、年齢},
データ（）{
  戻る {
    メッセージ: 'こんにちは、世界! '
  }
},
方法:{ 
  getName(名前){
    console.log('アプリは名前を受け取りました',name);
  },
  生徒名を取得します(name1){
    console.log('生徒の名前を受け取りました',name1);
  },
  デモ(セックス1){
    console.log('デモが呼び出されました',sex1);
  }
},
// マウント() {
  //カスタムイベントをバインド // this.$refs.student.$on('elderSex',this.schoolAge)
//カスタムイベントをバインドする（1回限り）
// this.$refs.student.$once('elderSex',this.schoolAge)
// },
}
</スクリプト>
<スタイルスコープ>
</スタイル>

<テンプレート>
  <div class="demo">
    <h2>生徒名: {{name}}</h2>
    <h2>生徒の年齢: {{age}}</h2>
    <button @click="sendStudentname">生徒の名前をアプリに送信</button>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    名前: '学生'、
    プロパティ: ['getStudentname'],
    データ（） {
      戻る {
        名前: '張三'、
        年齢: 19
      }
    },
    メソッド: {
      生徒名を送信します（）{
        this.getStudentname(this.name)
      }
    }
  }
</スクリプト>
<スタイル>
  .デモ{
    背景色: スカイブルー;
  }
</スタイル>