Vue中父组件与子组件的传递数据以及数据绑定

 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就可以了

 

转载于:https://www.cnblogs.com/ljy0414/p/11232878.html