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バックアップとリカバリの実践に関する詳細な説明
コードは次のようになります。 <!DOCTYPE html> <html> ...
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...
1. ROW_NUMBER()定義: ROW_NUMBER() 関数は、select によってクエリ...
vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...
最近の製品テストでは、同時呼び出し数が 10 未満の場合に応答時間が 100 ミリ秒以内に維持できな...
この記事の例では、画像の切り取りを実現するためのjsの具体的なコードを参考までに共有しています。具体...
ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...
開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態(スクロール...
以下は、私のプロジェクトでこのプロパティを使用する方法の例です。 (1)激しく透明な浮遊コードをコピ...
目次序文VirtualDOM とは何ですか? VirtualDOMを使用する理由DOMレンダリングペ...
Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...
イベントについて: MySQL 5.1 では、イベントの概念が導入され始めました。イベントは「時間ト...
<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...
Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...