1 <div id="app">//先创建一个Vue实例
2 <cpn :number1="num1"
3 :number2="num2" //传递数据只需要v-bind 指令 给子组件传递了data中的 num1 和 num2 2个数据
4 @changenum1="changenum1"
5 @changenum2="changenum2"/>
6 </div>
7 <template id="cpn">//子组件的模板
8 <div>
9 <h2>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>//这个不是通过cli 来创建的项目 ---学习使用的小demo
18 <script>
19 const app = new Vue({
20 el : "#app",
21 data : {
22 num1 : 1,
23 num2 : 0
24 },
25 methods : {
26 changenum1(value){
27 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 },//先通过props 来继承父亲传递的数据 此规定了数据类型
41 data() {
42 return {
43 dnumber1 : this.number1,
44 dnumber2 : this.number2
45 }
46 },
47 methods: {
48 num1input(event){
49 this.dnumber1 = event.target.value;
50 this.$emit("changenum1",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>
在这个demo中，其中包含了父组件向子组件传递数据，子组件通过事件向父组件传递数据，以及在加上双向绑定后，子组件通过事件修改父组件中data的值的功能。
1 子组件继承父亲的数据很简单 只需要直用v-bind 指令 先给子组件 传递 然后子组件中使用props 来接受数据即可
2 接着我们把input中的数据和子组件 num1 和 num2 的值绑定 这使用的是V-model 指令 此时修改input中的值 经过测试不会改变父组件中的data值（但是我们想实现子组件的值的改变来改变父组件中data的值
3 我们在子组件中data中定义了2个数据 分别为dnumber1 和 dnumber2 我们让其存储 num1 和 num2 的值，这时候我们把input的值 不和子组件中的number1/2 绑定 而是把input 的值 和 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就可以了