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>

実行結果:

ここに画像の説明を挿入