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 オーバーフローラップの新しいプロパティ値をどこでも使用

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

推薦する

Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...

jQuery はシャッター効果を実現します (li 配置を使用)

この記事では、ブラインド効果を実現するためのjQueryの具体的なコードを参考までに紹介します。具体...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...

MySQL の自動増分 ID に関するいくつかの小さな問題の要約

以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...

Windows 10にWSL2 Ubuntu20.04をインストールしてdocker環境を構築する方法

WSLを有効にするシステムがWindows 10 2004以降であることを確認してください 「メニュ...

Velocity.js はページスクロール切り替え効果を実装します

今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...

MySQL 8.0.12 winx64 詳細なインストールチュートリアル

この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...

MySQL の無効な左結合の問題を解決する方法とその使用上の注意

MySQLの左結合が無効であり、その使用方法今日SQLを書いていたとき、左結合を使用すると左のテーブ...

Ubuntu16.04はphp5.6ウェブサーバー環境を構築します

Ubuntu 16.04 はデフォルトで PHP7.0 環境をインストールしますが、PHP7 は一部...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

Linux の一般的なテキスト処理コマンドと vim テキストエディタ

今日は、いくつかの一般的なテキスト処理コマンドとvimテキストエディタを紹介します。 3日目 - 一...

CentOS 7でsambaを使用してフォルダーを共有するための完全な手順

序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...

MySQL 一時テーブルの簡単な使用法

MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...