1. これは理解するのが少し複雑なので、原理を注意深く読んで自分で入力していただければ幸いです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>タイトル</title> </head> <本文> <div id="アプリ"> <やること> <xian slot="xian" :title="タイトル"></xian> // 後ろから前へ読んで、トラバースされた値が v-bind に割り当てられ、v-bind の値が props 内の同じ名前の値に割り当てられることを理解することをお勧めします // [注意] v-on: バインドされたカスタム イベント名は自動的に小文字になります。大文字のイベント名を使用すると、次の this.$emit は大文字のままになり、バインドされません <yu slot="yu" v-for="(item,index) in items" v-bind:item="アイテム" v-bind:index="インデックス" v-on:remove="deleteItems(index)"></yu> // Vue インスタンスはデータとメソッドを View レイヤーにバインドし、View レイヤーはこれらのデータとメソッドを下位のコンポーネントに配布してバインドします。View は、Vue インスタンスのデータとメソッドを制御用のコンポーネントに転送することと同じです</todo> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <スクリプト> Vue.component("todo",{ テンプレート: '<div>\ <スロット名="xian"></スロット>\ <ul>\ <スロット名="yu"></スロット>\ </ul>\ </div>' }); Vue.component("xian",{ プロパティ: ['タイトル'], テンプレート: '<div>{{title}}</div>' }); Vue.component("yu",{// props は、変数名と同様に、任意に定義できるパラメータ名です。v-bind は、データと定義された変数 props: ['item', 'index'] である変数にバインドします。 // 現在のコンポーネント テンプレートのメソッドのみをバインドできます: '<li>{{index}}---->{{item}'',button @click="remove">delete</button></li>', メソッド: { 削除: 関数 (インデックス) { // this.$emit カスタム イベント配布 // [注] this.$emit('event name') では、キャメルケースではなく、ケバブケース (短いダッシュの命名) を使用する必要があります。 this.$emit('remove',index); } } }); var vm = 新しい Vue({ el: "#app", データ: { タイトル:「著者」、 アイテム: ['塩漬けの魚がひっくり返る 1'、'塩漬けの魚がひっくり返る 2'、'塩漬けの魚がひっくり返る 3'] }, メソッド: { deleteItems: 関数 (インデックス) { console.log(""+this.items[index]"を削除しました); this.items.splice(インデックス、1); } } }); </スクリプト> </本文> </html> 実行結果: 「削除」をクリックすると、任意の著者名を削除できます。ここでは 2 番目の著者名を削除をクリックすると、結果は次のようになります。 2. 誰もが理解できるように、次の図を示します。 おそらく、コンポーネントとインスタンス間のメソッドは相互運用できず、削除するノードはインスタンスの属性に属しているため、イベント配信を通じて、コンポーネントで定義されたメソッドがインスタンスで定義されたメソッドに転送され、その後ノードが削除される、という理解です。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する
>>: 数十億のデータに対するMySQLページングの最適化に関する簡単な説明
目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...
#mysql -uroot -pパスワードを入力してくださいmysql> show full...
1. MySQLに接続するフォーマット: mysql -h ホストアドレス -u ユーザー名 -p ...
目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...
1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...
序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...
序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...
レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...
1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...
この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...
今はモバイルインターネットが急速に発展している時代です。スマートフォンやタブレットはますます普及し、...
ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...
目次機能紹介レンダリング1. ホームページレンダリング用のコード(index03) 2. ゲーム開始...
最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...
パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...