Vueのカスタムイベントコンテンツ配信の詳細な説明

Vueのカスタムイベントコンテンツ配信の詳細な説明

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 のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueの「コンテンツ配信スロット」の最も包括的な概要の詳細説明
  • Vueのスロットコンテンツ配信で遊ぶ
  • Vueコンテンツ配信スロット(総合分析)
  • Vue学習ノート導入の詳細説明:コンポーネントコンテンツ配布(スロット)
  • Vuejs 11番目のコンポーネントのスロットコンテンツ配布例の詳細説明

<<:  Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する

>>:  数十億のデータに対するMySQLページングの最適化に関する簡単な説明

推薦する

Vue プロジェクトでのスキャンコード決済の実装例 (デモ付き)

目次需要背景思考分析UI 表示始める1. 支払いコンポーネントテンプレートを作成する2. 支払いコン...

MySQL でよく使用される SQL 文を表示する (詳細な説明)

#mysql -uroot -pパスワードを入力してくださいmysql> show full...

mysql 基本操作文コマンドの詳細な説明

1. MySQLに接続するフォーマット: mysql -h ホストアドレス -u ユーザー名 -p ...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...

フロントエンド開発者のための HTML 入門

1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...

Mysql 文字列の傍受と指定された文字列内のデータの取得

序文: 正規表現のインターセプションに似た、MySql フィールドの文字列から特定の文字を抽出すると...

MySQLで大きなテーブルを正常に削除する方法の詳細な説明

序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...

CentOS7でルートパスワードをリセットする方法

レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...

フレックスレイアウトの互換性の問題の概要

1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

モバイルインターネット時代: レスポンシブウェブデザインが一般的なトレンドに

今はモバイルインターネットが急速に発展している時代です。スマートフォンやタブレットはますます普及し、...

HTML の blockquote タグの使用と美化

ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...

WeChatアプレットで数字当てゲームを実装する実際のプロセス

目次機能紹介レンダリング1. ホームページレンダリング用のコード(index03) 2. ゲーム開始...

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のよう...

js シンプルで粗雑なパブリッシュとサブスクライブのサンプルコード

パブリッシュ/サブスクライブとは何ですか?例を挙げてみましょう。あなたは服を買うために店に行きます。...