. 1 < div ID = "App" > // create a Vue Example
2 < CPN : number1 = "num1"
. 3 : number2 = "num2" data transfer // v-bind only instructions to the data transfer subassembly of num1 and num2 2 data
. 4 @ changenum1 = "changenum1"
. 5 @ changenum2 = "changenum2" />
. 6 </ div >
. 7 < template ID = "CPN" > // template subassembly
. 8 < div >
. 9 < H2 > The props: {} {} number1 </h2>
10 <h2>data:{{ dnumber1 }}</h2>
11 <input type="text" :value="dnumber1" @input="num1input">
12 <h2>props:{{ number2 }}</h2>
13 <h2>data:{{ dnumber2 }}</h2>
14 <input type="text" :value="dnumber2" @input="num2input">
15 </div>
16 </Template >
17 < Script src = "./ JS / vue.min.js" > </ Script > // This is not a project to create a cli --- by learning to use a small Demo
18 < Script >
19 const App = new new VUE ({
20 is EL: " #app " ,
21 is Data: {
22 is num1: . 1 ,
23 is num2: 0
24 },
25 Methods: {
26 is changenum1 (value) {
27 the this.num1 = value;
28 },
29 changenum2(value){
30 this.num2 = value;
31 }
32 },
33 // 组件
34 components : {
35 cpn : {
36 template : "#cpn",
37 props : {
38 number1 : Number,
39 number2 : Number
40 } // first to inherit the data transmitted by the father, this specifies the data type props
41 is Data () {
42 is return {
43 is dnumber1: the this .number1,
44 is dnumber2: the this .number2
45 }
46 is },
47 Methods: {
48 num1input (Event) {
49 the this .dnumber1 = event.target.value;
50 the this . $ EMIT ( " changenum1 " , the this.dnumber1);
51 this.dnumber2 = this.dnumber1 * 100;
52 this.$emit("changenum2",this.dnumber2);
53 },
54 num2input(event){
55 this.dnumber2 = event.target.value;
56 this.$emit("changenum2",this.dnumber2);
57 this.dnumber1 = this.dnumber2 / 100;
58 this.$emit("changenum1",this.dnumber1);
59 }
60 }
61 }
62 }
63 })
64 </script>
In this demo, in which a parent component contains the transmission data to the subassembly, the subassembly is transmitted to the parent component event data, and after adding bidirectional binding subassembly parent components editing data values via events.
1 subassembly his father's data is just simple linear give transfer subassembly subassembly is then used to receive data props v-bind command can
We then 2-value data and the input of the subassembly num1 and num2 this binding using V-model modification value input command in this case tested does not change the data value in the parent components (but we want to achieve subassembly changing the value to change the value of the parent component data
3 we define the data in the data in the two subassemblies were dnumber1 and let us dnumber2 value storage num1 and num2, this time we do not and the value of the input subassembly number1 / 2 binding but to the input value dnumber1 / 2 binding
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就可以了