。1 < DIV ID = "アプリケーション" > // Vueの例作成
2 < CPN ：番号1 = "NUM1"
。3 number2の：のデータ転送サブアセンブリへの命令のみ= "NUM2"データ転送// V-バインドNUM1とNUM2 2つのデータ
。4 changenum1 @ = "changenum1"
5 changenum2 @ = "changenum2" />
6 </ DIV >
7 < テンプレートID = "CPN" > //テンプレートサブアセンブリ
。8 < DIV >
9 < H2 >小道具：{} {}数値1 </ H2 >
10 < H2 >データ：{{dnumber1}} </ H2 >
11 < 入力タイプ= "テキスト" ：値= "dnumber1" @input = "num1input" >
12 < H2 >小道具：{{数値2}} </ H2 >
13 < H2 >データ：{{dnumber2}} </ H2 >
14 < 入力タイプ= "テキスト" ：値= "dnumber2" @input = "num2input" >
15 </ DIV >
16 </テンプレート>
17 < スクリプトSRC = "./ JS / vue.min.js" > </ スクリプト> //これは小さなデモを使用することを学ぶことで--- CLIを作成するためのプロジェクトではありません
18 < スクリプト>
19 のconstのApp = 新新をVUE（{
20は EL：" #app " 、
21は データ：{
22は NUM1：1 、
23である NUM2：0
24 }、
25の 方法：{
26は changenum1（値）{
27 本.num1 = 値。
28 }、
29 changenum2（値）{
30 この.num2 = 値。
31 }
32 }
33の // 组件
34の 成分：{
35 CPN：{
36 テンプレート：" #cpn " 、
37の 小道具：{
38 数値1：番号、
39 数値2：数
40 } //父親によって送信されたデータを継承する最初、これはデータ型が小道具を指定する
41である データ（）{
42は リターン{
43は dnumber1：この.number1、
44である dnumber2：これは.number2
45 }
46である }、
47の 方法：{
48 num1input （イベント）{
49 この.dnumber1 = event.target.value;
50 本。$ EMIT（" changenum1 " 、この.dnumber1）;
51 この.dnumber2 = この.dnumber1 * 100 。
52 本。$（発する" changenum2 " 、この.dnumber2を）。
53 }、
54 num2input（イベント）{
55 この.dnumber2 = event.target.value。
56 本。$（発する" changenum2 " 、この.dnumber2）を、
57 この.dnumber1 = この.dnumber2 / 100;
58 本。$（発する" changenum1 " 、この.dnumber1を）。
59 }
60 }
61 }
62 }
63 }）
64 </ スクリプト>
このデモでは、親コンポーネントがサブアセンブリへの送信データが含まれている、サブアセンブリは、親コンポーネント・イベント・データを送信し、イベントを介して、データ値を編集双方向結合サブアセンブリ親コンポーネントを追加した後れます。
1父のデータをサブアセンブリであるだけの単純な線形与える転送サブアセンブリサブアセンブリその後、V-bindコマンドはできる小道具のデータを受信するために使用されます
私たちはその後、2値データとサブアセンブリNUM1とNUM2、この私たちが達成したいが、親コンポーネント内のデータ値を（変更しないテストこの場合にはV-モデル修正値入力コマンドを使用して結合サブアセンブリの入力親成分データの値を変更する値を変更します
3我々は、我々にはない、この時間と結合入力サブアセンブリ番号1/2の値が、入力には2つのサブアセンブリにdnumber1データ内のデータを定義した値記憶NUM1とNUM2をお聞かせdnumber2値dnumber1 / 2結合
4 此时我们想到v-model 指令 其实是由两部分构成的，一个是：value 一个是 @input="this.dnumber1/2=event.target.value"构成的 我们现在需要做的就是通过把子组件中的data中的值 通过事件 传递给父组件
让其的data中的num1/2 改变
5 我们给子组件中的@input 事件中 加入了方法 用this.$emit（“事件名称”，value） 将事件发射出去 在父组件中用@事件名称来接受这个发出的事件
6 然后在父组件methods 中 将接受到的value值 修改自己data中的num1/2就可以了