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

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)
      }
    }
  }
</スクリプト>
<スタイル>
  .デモ{
    背景色: スカイブルー;
  }
</スタイル>

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue 学習ノート: ネイティブ イベントをコンポーネントにバインドする例
  • vue コンポーネントにイベント @click.native アクションを追加
  • Vue コンポーネントのカスタム イベントの機能図
  • Vue でクリック イベントをカスタム コンポーネントにバインドする方法

<<:  CSS オーバーフローラップの新しいプロパティ値をどこでも使用

>>:  ウェブフロントエンド開発の細部

推薦する

MySQL inndbジョイントインデックスを正しく使用する方法を徹底的に理解するためのケーススタディ

最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...

WeChatミニプログラム抽選コンポーネントの使い方

WeChatコンポーネントの形式で提供されます。コンポーネント内部ではasync/awaitが使用さ...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...

Kubernetes YAMLファイルの使用

目次01 YAMLファイルの概要YAML---キー値型YAML---リスト型02 K8Sにおけるマス...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため...

CentOSにDockerをインストールする方法

ここでは比較的簡単なインストール方法のみを紹介します。 1. yumを使用してインストールするyum...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

HTML で #include ファイルを使用する例

a.htmとb.htmの2つのファイルがあります。同じディレクトリ内のa.htmの内容は次のとおりで...

HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル

<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...

Linux での mysql-5.7.28 インストール チュートリアル

1. 公式ウェブサイトから Linux バージョンをダウンロードします: https://dev.m...

MySQL はエンタープライズレベルのログ管理、バックアップ、リカバリの実践的なチュートリアルを実装します

背景事業が発展するにつれ、会社の事業内容や規模は拡大し続け、ウェブサイトには大量のユーザー情報やデー...

JavaScriptの再帰の詳細

目次1. 再帰とは何ですか? 2. 再帰を使って数学の問題を解く1. 1 * 2 * 3 * 4 …...

モバイル端末におけるビューポートの具体的な使用法についての簡単な説明

目次1. 基本概念1.1 2種類のピクセル1.2 3つのビューポート2. ビューポート設定3. 1回...