Vue学习笔记-父子组件通信案例 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <cpn :number1="num1"
10          :number2="num2"
11          @num1change="numchange1"
12          @num2change="numchange2"
13     >
14 
15     </cpn>
16 </div>
17 
18 <template id="cpn">
19     <div>
20         <!--1.子组件里的双向绑定只能用子组件data里面的值-->
21 
22         <!--<h2>{{number1}}</h2>-->
23         <!--&lt;!&ndash;props单向数据流，不允许子组件直接改变props里面的值&ndash;&gt;-->
24         <!--&lt;!&ndash;<input type="text" v-model="number1">&ndash;&gt;-->
25         <!--&lt;!&ndash;可以用子组件data里面的数据实现双向绑定&ndash;&gt;-->
26         <!--<input type="text" v-model="dnumber1">-->
27         <!--<h2>{{number2}}</h2>-->
28         <!--<input type="text" v-model="dnumber2">-->
29 
30 
31         <!--2.子组件的值改变时传到父组件改变父组件的值-->
32         <!--v-model的本质是v-bind绑定一个value属性,v-on指令给当前元素绑定input事件-->
33 
34         <h2>{{number1}}</h2>
35         <input type="text" :value="dnumber1" @:input="num1Input">
36         <h2>{{number2}}</h2>
37         <input type="text" :value="dnumber2" @:input="num2Input">
38     </div>
39 </template>
40 
41 </body>
42 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
43 <script>
44     const cpn = {
45         template: '#cpn',
46         props: { //props单向数据流，父组件传递到子组件的值不允许子组件直接改变
47             number1: Number,
48             number2: Number
49         },
50         data() { //想要修改props里的值可以在data里面保存一份，然后修改
51             return {
52                 dnumber1: this.number1,
53                 dnumber2: this.number2
54             }
55         },
56         methods: {
57             num1Input (event) {
58                 this.dnumber1 = event.target.value
59                 this.$emit('num1change',this.dnumber1)
60             },
61             num2Input (event) {
62                 this.dnumber2 = event.target.value
63                 this.$emit('num2change',this.dnumber2)
64             }
65         }
66     }
67     const app = new Vue ({
68         el: '#app',
69         data: {
70             num1: 1,
71             num2: 2
72         },
73         components: {
74                 cpn
75         },
76         methods: {  //子组件值改变时父组件值也改变
77             numchange1 (value) {
78                 this.num1 = parseInt(value)
79             },
80             numchange2 (value) {
81                 this.num2 = parseInt(value)
82             }
83         }
84     })
85 </script>
86 </html>

 

posted @ 2019-11-20 18:09  leahtao  阅读(150)  评论(0)  编辑  收藏  举报