コミュニケーションと削除Vueの親子アセンブリ

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <METAのcharset = "UTF-8"> 
    <タイトル> VUE </ TITLE> 
    <SCRIPT SRC = "./ JS / vue.js"> </スクリプト>　　//組み込まJS 
</ HEAD> 
<BODY> 
    <DIV ID = "アプリケーション"> 
        <INPUT = V-モデル"inputValueでは、" /> 
        <ボタン@ =をクリックして"handleSubmitは">送信</ボタン> 

        <UL> 
            < todo- アイテム
                    V - のための「リストの（項目、インデックス）」=　　ループリスト内//削除要素
                    キー： =「インデックス」　　　　　円形のリスト// VUEニーズが追加されます。キー=「ユニークな識別」、そうでない場合は警告が表示されます
                    ：コンテンツ =「項目」
                    ：インデックス=「インデックス」 
                    削除=「handleDelete」@
            > 
            </ TODO-項目> 
        </ UL> 
    </ div> 
</ body>の

//小道具の親は、サブアセンブリにデータを使用することができます。
//使用する$ EMITサブアセンブリは、親コンポーネントのカスタムイベントをトリガすることができます。

// アク体循環添字指数、公開してイベントにサブスクライブ@Delete 
// ワード部品にhandleDeleteメソッドを呼び出している間とき、質量の参加がインデックスであるトリガーのカスタムイベントの$ EMITを
 
<SCRIPT> // グローバルコンポーネント// ヴュー.component（ 'TODO品目'、{ //      テンプレート： '<LI>項目</ LI>' // }）// ローカルアセンブリVAR todoItem = { 
        小道具：[ 'コンテンツ'、'インデックス' ]　　//プロパティは、サブアセンブリ、送信されたデータ受信するための親要素の小道具 
        テンプレート：
    
    
    
    
    
    '{{内容}} </ LI> <LI =クリックして"handleClick" @>' 、
        メソッド：{ 
            handleClick（）{ 
                この。$ EMIT（ '削除'、この.INDEX）　　handleClick方法をクリックします//、トリガカスタムイベント削除 
            } 
        } 
    } 
　　//this.$emit(event,arg）現在のインスタンス上のトリガ・イベント

    新しい新しいヴュー（{ 
        EL： "#app" 、
        コンポーネント：{
           'TODO品目' ：todoItem　　//規定成分 
        }、
        データ：{ 
            リスト：[]、
            inputValueでのために： '' 
        }、
        方法：{ 
            HandleSubmit（）{
                この .list.push（この.inputValue）;
                 この .inputValue = '' 
            }、
            handleDelete（インデックス）{ 
                この .list.splice（インデックス,. 1 ）    ビットを削除し、//最近標準 
            } 
        } 
    }）
 </ SCRIPT> 
</ HTML> 
//クラスのWebページムーデル教師のコースノートを学ぶために、技術の共有ギャングのおかげで
コミュニケーションと削除Vueの親子アセンブリ

おすすめ
