1. コンポーネントの登録コンポーネントを登録する際に注意すべき点が 5 つあります。 1. データは関数として記述し、returnで値を返す必要があります。これにより、異なる呼び出しが互いに影響を及ぼさなくなります。 2. テンプレートという単語の後に浮動数字が続きます。これは Tab の上のキーです。 3. テンプレートの後のコンテンツは、複数のdivに分割するのではなく、大きなdivに記述する必要があります。 4. 以下は配列です。プロパティがたくさんあるためです。 5. jsファイルとして保存 Vue.component("myson",{ データ(){ 戻る { sonmsg:"こんにちは息子さん" } }, テンプレート:` <div> <p>サブコンポーネントコンテンツ</p> prop が受け取った値: {{sonprop}} </div> `、 小道具:["sonprop"], 方法:{ 息子クリック(){ this.$emit("sonemit",this.sonmsg) } } }) 2. コンポーネントの使用使用時に注意すべき点が1つあります。まずvueを参照し、次にサブコンポーネントを参照する必要があります。 <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="00-component-child.js"></script> </head> <本文> <div id="アプリ"> <マイソン></マイソン> </div> <script type="text/javascript"> var vm = 新しい Vue({ el:"#アプリ", データ:{ parentmsg:"sonprop への parentmsg" } }) </スクリプト> </本文> </html> 3. 父から息子へ父子相続は比較的単純で、2 つのステップに分かれています。 1. コンポーネント内のプロパティを定義する 小道具:["sonprop"] 2. コンポーネントを使用する場合、親の値を定義されたプロパティにバインドします。 <myson :sonprop="親メッセージ"></myson> 親の値は次のようになります データ:{ parentmsg:"sonprop への parentmsg" } 詳しい送信手順は以下のとおりです。複雑に見えますが、実際には上記の 2 つの手順だけです。 4. 息子から父へ子コンポーネントはメソッドを介して親に値を渡します。親と子はそれぞれメソッドを定義し、中間メソッドを使用して接続します。この中間メソッドの使用を覚えておいてください。細かく分解すると、かなり多くの手順があります。 1. サブコンポーネントテンプレートのボタンでクリックイベントを使用する <button @click="sonclick">ボタン</button> 2. サブコンポーネントで上記で使用したメソッドを定義し、中間メソッドをトリガーしてデータを渡す 息子クリック(){ this.$emit("sonemit",this.sonmsg) } 3. 親が子コンポーネントを使用する場合、中間メソッドを使用して独自のメソッドをバインドします。 <myson @sonemit="親クリック"></myson> 4. 親メソッドでデータを受信する。pは任意の文字として記述できる。 親クリック(p){ vm.parentmsg = p; } 詳細なコード図 操作効果 5. スロット1. スロットを追加します。スロットは、コンポーネントを使用するときに何でも挿入できるコンポーネント内のスペースです。 サブコンポーネント内のどこかに定義します: コンポーネントを使用する場合、この場所に任意のラベルを追加できます。 2. 複数のスロットを追加する場合は、各スロットに名前を付け、使用時に各スロットをテンプレートに配置します。 複数のスロットの定義 テンプレート:` <div> <p>サブコンポーネントコンテンツ: {{sonmsg}}</p> <p>分割線 111111111111111</p> <スロット名="a1"></スロット> <p>区切り線 2222222</p> <スロット名="a2"></スロット> <p>分割線 333333333</p> </div> `、 複数のスロットを使用し、1 つのスロットにつき 1 つのテンプレートを使用します。 <テンプレートスロット="a1"> <button>ボタン a1</button> </テンプレート> <テンプレートスロット="a2"> <button>ボタン a2</button> </テンプレート> 6. サブコンポーネントはスロットに値を渡す1. サブコンポーネント テンプレートで中間データ emitmsg を定義します。名前は任意に指定できます。 <スロット名="a1" :emitmsg="sonmsg"></スロット> 2. 親コンポーネントで受信するには res を使用します。子コンポーネントがいくつあっても、受信には res が使用されます。res は結果セットです。スロットが複数ある場合は、その中にデータが含まれます。 <テンプレートスロット="a1" スロットスコープ="res"> {{res.emitmsg}} </テンプレート> コードショーケース 表示効果: 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。
>>: MySQLバックアップとリカバリの実践に関する詳細な説明
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...
一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...
目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...
オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...
Portainer は、ステータス表示パネル、アプリケーション テンプレートの迅速な展開、コンテナ ...
1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....
1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...
目次1. はじめに2. 環境とツール3. Dockerをインストールし、リモート接続を構成する4. ...
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...
序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...
ジェネレータとは何ですか?ジェネレーターは関数内で実行されるコードです。値を返した後、一時停止し、呼...
以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...