シンプルなコンポーネントが値を渡します

親コンポーネントサブアセンブリのパス値と同様に

サブアセンブリを通過するV-バインド、バインド変数を受信サブアセンブリは小道具オブジェクト

伝統的な値として親コンポーネントサブアセンブリ

（「削除」、this.index）この。$エミットすることにより、パラメータを渡す方法で実行するために、外部モニタは、イベントに新しいイベントを取得することによって開始します。

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< メタのcharset = "UTF-8" > 
< タイトル>简单的组件传值</ タイトル> 
< スクリプトSRC = "./ vue.js" > </ スクリプト> 
</ ヘッド> 
< ボディ> 
    < DIV ID = "ルート" > 
        < DIV > 
            < 入力タイプ= "テキスト" Vモデル=」
            @click = "handleBtnClick" >提交</ ボタン> 
        </ DIV > 
        < UL > 
            < TODO項目V-バインド：コンテンツ= "項目" 
                       V-バインド：インデックス= "インデックス" 
                       V-ため= "（項目、インデックス）リストに」
                       @Delete = "handleItemDelete" > 
            </ TODO項目> 
        </ UL > 
    </ divの> 
    < スクリプト>
        VAR TodoItem = { 
            小道具：[ ' コンテンツ' ' インデックス' ]、
            テンプレート：" <LIクリック@ = 'handleItemClick'> {{内容}} </ LI> " 、
            方法：{ 
                handleItemClick：関数（）{
                     この$ EMIT（" 削除" 、この。インデックス）; 
                } 
            } 
        } VARのアプリ= 新しいヴュー（{ 
            EL：" #root " 、
            コンポーネント：{ 
                TodoItem：TodoItem

        
            } 
            データ：{
                todoValue："" 、
                リスト：[] 
            }、
            メソッド：{ 
                handleBtnClick：関数（）{
                     この.list.push（この.todoValue）
                     この.todoValue = "" 
                }、
                handleItemDelete：関数（指数）{
                     この.list.splice （インデックス1 ）
                } 
            } 
        }）
    </ スクリプト>
</ ボディ> 
</HTML >