父子组件通信小结以及双向数据绑定问题

1.先扯个淡

学习了一天的Vue组件化开发,脑瓜子嗡嗡的。遇事不要慌，先去吃个快餐。吃饱才有力量扯淡，程序员还是应该以身材为重。鄙人健身三年，有喜爱静止的小伙伴欢送私聊深刻交换一下。

2.步入正题，有这样一个需要：

1.子组件能够获取父组件的data数据
2.子组件中的输入框能够批改获取到的data数据
3.子组件在批改获取到的数据同时反过来扭转父组件的data数据

3.实现过程

1.首先子组件获取父组件的data数据置信大家肯定不生疏，只须要通过props自定义属性即可。(prop 是子组件用来承受父组件传递过去的数据的一个自定义属性。父组件的数据须要通过 props 把数据传给子组件，子组件须要显式地用 props 选项申明 “prop”)

<body>    <div id="app">        <cpn :number1="num1" :number2="num2" ></cpn>    </div>     <template id="cpn">         <div>         <h2>{{number1}}</h2>         <h2>{{number2}}</h2>         </div>     </template>      <script> var vm = new Vue({            el: '#app',            data: {                num1:1,                num2:0            },            components:{                cpn:{                   template:'#cpn',                   props:{                    number1:Number,                    number2:Number                   },            }        }        }); </script></body>

很简略的操作 输入胜利：2.接下来 咱们要通过input输入框扭转props中获取的数据内容，很多人会想到通过v-model实现数据双向绑定。那么可行吗？可行，然而会有一点小问题。 批改template标签内容 通过v-model绑定number1和number2

 <template id="cpn">         <div>         <h2>{{number1}}</h2>         <input type="text" v-model="number1">         <h2>{{number2}}</h2>         <input type="text" v-model="number2">         </div>     </template>

输入后果如下：能够看到咱们的确能够通过输入框输出内容实现对props内数据的批改。然而红艳艳的报错咱们还是不瞎的。将报错内容百度翻译一下。大略的意思就是 props中是咱们从父组件中获取的数据对吧。那么vue不想让你间接在子组件中批改这个数据，这样会造成一些逻辑的凌乱。而是想让你通过父组件批改这个数据。那么咱们能够通过data（）函数来实现

components:{                cpn:{                   template:'#cpn',                   props:{                    number1:Number,                    number2:Number                   },                data(){                return{                  dnumber1:this.number1,                  dnumber2:this.number2              }            }        }        }

同时扭转标签内容

 <div>         <h2>props:{{number1}}</h2>         <h2>data:{{dnumber1}}</h2>         <input type="text" v-model="dnumber1">         <h2>props:{{number2}}</h2>         <h2>data:{{dnumber2}}</h2>         <input type="text" v-model="dnumber2">         </div>

3.最初咱们想要通过input扭转父组件中的data，首先奉上残缺代码

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <script src="../vue.js"></script></head><body>    <div id="app">        <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"></cpn>    </div>     <template id="cpn">         <div>         <h2>props:{{number1}}</h2>         <h2>data:{{dnumber1}}</h2>         <input type="text" v-bind:value="dnumber1" @input="number1input">         <h2>props:{{number2}}</h2>         <h2>data:{{dnumber2}}</h2>         <input type="text" v-bind:value="dnumber2" @input="number2input">         </div>     </template>         <script> var vm = new Vue({            el: '#app',            data: {                num1:1,                num2:0            },            methods:{              num1change(value){              this.num1=value*1;              },              num2change(value){              this.num2=value*1;              }            },            components:{                cpn:{                   template:'#cpn',                   props:{                    number1:Number,                    number2:Number                   },                data(){                return{                  dnumber1:this.number1,                  dnumber2:this.number2              }            },            methods:{                number1input(event){                    this.dnumber1=event.target.value                    this.$emit('num1change',this.dnumber1)                },                number2input(event){                    this.dnumber2=event.target.value                    this.$emit('num2change',this.dnumber2)                }            }            }        }        }); </script></body></html>

首先咱们在input中绑定事件@input=“number1input”，这个事件的作用是每次触发input事件就通过$emit发送给父组件。父组件接管后将事件中的value值赋给num实现数据的双向传递。

4.问题补充：

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

初学vue很容易一不小心遇到这个谬误，这是因为你标签中有多个标签时，须要一个根组件将它们全副蕴含起来。

本文转自：SDK社区（sdk.cn)是一个中立的社区，这里有多样的前端常识，有丰盛的api，有爱学习的人工智能开发者，有有趣风趣的开发者带你学python，还有将来炽热的鸿蒙，当各种元素组合在一起，让咱们一起脑洞大开独特打造业余、好玩、有价值的开发者社区，帮忙开发者实现自我价值！