关于vue.js:深入解析Vue父子组件通信-双向数据绑定问题

7次阅读

共计 2964 个字符，预计需要花费 8 分钟才能阅读完成。

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 实现数据的双向传递。