親コンポーネントは、サブアセンブリにデータを渡します
1は、アセンブリ親子関係が最初に形成されています。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "../ JS / vue.js"> < / SCRIPT>
</ head>
<body>
<DIV ID = "アプリケーション">
</ div>
<テンプレートID = "CPN">
の<div>
<H2> {{cmovies}} </ H2>
<P> {{ cmessage}} </ P>
</ div>
</テンプレート>
<スクリプト>
CONST CPN = {
テンプレート： `＃1 cpn`、
データ（）{
リターン{}
}、
メソッド：{}
}
せVM =新しい新しいヴュー（{
EL： '#app' 、
データ：（） => （{
メッセージ： 'データ親要素' 、
作品：[ 'ウルフ1'、 '浮遊土'、 '登山' ]
}）、
成分：{
CPN
}
}）
</ SCRIPT>
</ BODY>
</ HTML>
図2に示すように、サブアセンブリの小道具の定義では、2つの変数（メッセージ）（moviess）を定義
小道具：[ 'メッセージ'、 'moviess']
サブアセンブリ使用して、バインドV-バインドを持つ2つの変数（メッセージ）（moviess）、およびデータ（メッセージ）（ムービー）親コンポーネントは、これら2つの変数を渡す3、。
< CPN ：メッセージ= "メッセージ" ：moviess = "作品" > </ CPN >
<！ - 大文字こぶ命名法間ではサポートされませんが区切ら- - >
完全なコード**** *****
<！DOCTYPE HTML >
< HTML LANG = "EN" >
< 頭>
< メタ文字コード= "UTF-8" >
< タイトル>ドキュメント</ タイトル>
< スクリプトSRC = "../ JS / vue.js" > </ スクリプト>
</ ヘッド>
< 身体>
< div要素のid = "アプリ" >
< CPN ：メッセージ= "メッセージ" ：moviess =」
<！ - 命名法間のこぶ大文字の使用をサポートしていません-分離- >
</ divの>
<！ - 父から息子へ- >
<！ -
1、親子関係
サブアセンブリで定義されている2、小道具は、二つの変数（メッセージ）（moviess）を定義する
。3、サブアセンブリ使用する場合、結合する2つの変数V-結合し、データ（メッセージ）（ムービー）親コンポーネントは、これら2つの変数を渡します。
- >
< テンプレートID = "CPN" >
< DIV >
< H2 > {{メッセージ}} </ H2 >
< UL >
< リチウムV-ため= "moviessの項目" >
{{}}アイテム
<
UL >
</ DIV >
</ テンプレート>
< スクリプト>
constのCPN = {
テンプレート：＃ `cpn`は、
// 小道具：[ 'メッセージ'、 'moviess']、
小道具：{
// 1、型の制限。
// メッセージ：アレイ、
// moviess：文字列、
//はいくつかのデフォルト値を提供
{：メッセージ
タイプ：文字列、
デフォルト：' AAAA ' 、
必須：trueに
}
//をコンポーネントを使用する場合、いかなる変数バインディングはディスプレイ、デフォルト値定義された小道具が定義されていない
moviessを{
// タイプは、アレイまたはオブジェクトであり、デフォルト値の関数でなければなりません。
タイプ：配列、
// デフォルト：[]
デフォルト（）{
リターン[]
}
}
}、
データ（）{
リターン{}
}、
メソッド：{}
}
聞かせVM = 新しい新しいヴュー（{
EL：' #app ' 、
データ：（）=> （{
メッセージ：' データ親要素' 、
作品：[ ' ウルフ1 ' 、' 浮遊土' 、' クライマー' ]
}）、
コンポーネント：{
CPN
}
}）
</ スクリプト>
</ ボディ>
</ HTML >
**補充文言を小道具
小道具：{
// 1、型の制限。
// メッセージ：アレイ、
// moviess：文字列、
// いくつかのデフォルト値を提供する
メッセージ：{
タイプ：文字列、
デフォルト： 'AAAA' 、：
必須trueに
}
//をアセンブリ使用時デフォルト値が定義されていない定義された小道具バインド変数、ディスプレイがある場合
moviess：{
// タイプは、配列またはオブジェクトが、それはデフォルト値の関数でなければならないです。
タイプ：アレイ、
// デフォルト：[]
デフォルト（）{
リターン[]
}
}
}
第二に、親サブアセンブリコンポーネントに送信されたデータ
1、コンポーネントは、親子関係を構成します
カスタム・アクション・イベント2、サブアセンブリ：親コンポーネントにイベントを送信します
< ボタンV-ため= "カテゴリにおける項目" @click = "btnclick（アイテム）" > {{item.name}} </ ボタン>
方法：{
btnClick：機能（項目）{
// 送信イベント：カスタムイベント
この。$ EMIT（ 'によってitemClick' 、項目）
}
}
3、によってitemClickアセンブリテンプレート親で定義されたサブコンポーネント=「cpnclick」@イベントを使用し、親コンポーネントcpnclickに新しいイベントを作成します
< CPN @itemclick = "cpnclick" > </ CPN >
方法：{
cpnclick：関数（アイテム）{
にconsole.log（ 'cpnclick' 、項目）
}
}
*** ***完全なコード
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=デバイス幅、初期スケール= 1.0">
< HTTP-当量=メタ"X - UA互換"コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<SCRIPT SRC = "../ JS / vue.js"> </ SCRIPT>
</ヘッド>
<！ -親コンポーネントテンプレート- >
<divの上記のid以上= "アプリケーション">
<@によってitemClick CPN = "cpnclick"> </ CPN>
</ div>
<！ -
1 、コンポーネント間の親子関係で構成される
サブで2、コンポーネントは、親コンポーネントにイベントを起動することで、イベントを定義します。この。$ EMIT（ 'によってitemClick'
<身体>
<！ -サブアセンブリのテンプレート- >
<テンプレート上記のid以上= "CPN">
の<div>
<ボタンV- ためのクリック= "btnClick（項目）" @ = "カテゴリーのアイテム"> {{item.name }} </ボタン>
</ div>
</テンプレート>
<SCRIPT> // サブアセンブリ
のconst CPN = {
テンプレート：＃ `cpn`、
データ（）{ リターン{
カテゴリー：[
{ID： 'AA'、名前： 'ホットオファー' }、
{上記ID： 'BB'、名称： '携帯電話' }、
上記のID {：「CC」、名：「スマートホーム」
}、
ID {： D-D ''、名前： '美容' }
]
}
}、
メソッド：{
btnClick：機能（項目）{
// 送信イベント：カスタムイベント
この。$ EMIT（ 'によってitemClick' 、項目）
}
}
}
// 親要素
せVM = 新しい新しいヴュー（{
EL： '#app' 、
データ：（） => {}、
コンポーネント：{
CPN
}
方法：{
cpnclick：関数（アイテム）{
にconsole.log（ 'cpnclick' 、項目）
}
}
}）
</ SCRIPT>
</ body>
</ HTML>
