Vue組件之單向數據流的解決方法

更新時間：2018年11月10日 12:58:34 作者：初心鴻鵠

這篇文章主要介紹了Vue組件之單向數據流的解決方法,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

子組件能夠通過自身的props選項獲取父組件上的數據，但是在默認情況下，props是單向綁定的---當父組件數據（屬性）發(fā)生變化的時候會傳遞給子組件，引起子組件的變化，但不能反過來并且不允許子組件直接改變父組件的數據，會報錯的。例如：

也就是說當通過一種方法改變父組件數據的時候，子組件與之相關聯的props數據也會發(fā)生改變，從而影響子組件，但是子組件直接改變從父組件拿過來的props數據卻不能影響父組件的原始數據。也就是說一般情況下只能是“父影響子，而不是子影響父”。

兩種情況：

1.如果子組件想將從父組件獲得的數據作為局部數據來使用，可以將其給保存到子組件的局部變量data中（子組件中的變量），不影響父組件的數據；例如：

data:function(){
                return {
                  weather:{
                    tempre:"22.3℃",
                    weth:"rain",
                    wind:this.ser
                  }
                }
              },

這里的this.sers就是來源于子組件的props數據。

2.如果子組件想修改數據并且同步更新到父組件，兩種解決方式

第一種：使用.sync加上顯式觸發(fā)的一個事件this.$emit("update:你要更改的props數據", 改變后的值)，也就是在一個事件觸發(fā)的函數中通過this.$emit("update:你要更改的props數據", 改變后的值)來改變數據；例如：

HTML部分

 <div id= "container" v-cloak>
    <my-compon></my-compon>
  </div>
  <!-- 父組件模板 -->
  <template id="myComp">
    <div>
      <h3>大家好，我是{{animal.name}}貓，我已經和Jerry斗爭了{{animal.age}}年了</h3>
 給綁定的數據使用.sync修飾符
      <my-comp-son v-bind:animalage.sync="animal.age"></my-comp-son>
    </div>
  </template>
  <!-- 子組件模板 -->
  <template id="myCompSon">
    <div>
      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
      <h3>今天的天氣：{{weather.weth}},風力{{weather.wind}},溫度{{weather.tempre}},{{animalname}},{{animalage}}</h3>
      <button @click = "changeFatDaAge">點擊父組件中的數據會跟著改變方式一</button> 
    </div> 
  </template>

JS部分

var app = new Vue({
      el:"#container",
      data:{
        house:{
          date:"2017-10-10",
          area:"144m²",
          floor:6,
        },
        carBrand:"Benzi"
      },
      components:{
        "my-compon":{//父組件
          template:"#myComp",
          data:function(){
            return {
              animal:{
                name:"Tom",
                age:3,
                skin:"black"
              },
              shoe:"鴻星爾克",
              dog:{
                hair:"brown",
                height:1.25
              }
            }
          },
          methods: {
            changeData:function () {//這里的this指的是當前父組件的實例
              this.animal.name = "Kitty"http://改變父組件中的數據
            }
          },
          components:{
            "my-comp-son":{//子組件
              template:"#myCompSon",
              props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣
              data:function(){
                return {
                  weather:{
                    tempre:"22.3℃",
                    weth:"rain",
                    wind:"3級"
                  }
                }
              },
              methods:{
                // 給v-bind使用修飾符.sync,需要顯式地觸發(fā)一個更新事件（this.$emit("update:你要更改的props數據", 改變后的值)）
                changeFatDaAge:function(){
                  // this.animalage = 19;
                  this.$emit("update:animalage", 19)//通過這個方法來改變子組件props數據，并引起父組件相應數據的改變
                }
              }
            }
          }
        }
      }
    })

當點擊按鈕的時候父組件上的原始數據也會發(fā)生改變，不過這種方式不常用，寫法也太麻煩，不建議使用；

第二種：將父組件的數據包裝成對象并綁定到子組件上，在子組件中修改對象的屬性（其實并沒有真正改變該對象，因為對象是引用類型的數據，雖然屬性發(fā)生了變化，但指針并沒有發(fā)生變化），常用。例如：

HTML部分：

<div id= "container" v-cloak>
    <my-compon></my-compon>
  </div>
  <!-- 父組件模板 -->
  <template id="myComp">
    <div>
      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
      <!-- 將父組件的數據包裝成對象并綁定到子組件上，在子組件中修改對象的屬性，在這是dog -->
      <my-comp-son :dog = "dog"></my-comp-son>
    </div>
  </template>
  <!-- 子組件模板 -->
  <template id="myCompSon">
    <div>
      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
      <button @click="changeFondata">點擊父組件中的數據會跟著改變方式二</button>
    </div> 
  </template>

JS部分

var app = new Vue({
      el:"#container",
      data:{
        house:{
          date:"2017-10-10",
          area:"144m²",
          floor:6,
        },
        carBrand:"Benzi"
      },
      components:{
        "my-compon":{//父組件
          template:"#myComp",
          data:function(){
            return {
              animal:{
                name:"Tom",
                age:3,
                skin:"black"
              },
              shoe:"鴻星爾克",
              dog:{
                hair:"brown",
                height:1.25
              }
            }
          },
          methods: {
            changeData:function () {//這里的this指的是當前父組件的實例
              this.animal.name = "Kitty"http://改變父組件中的數據
            }
          },
          components:{
            "my-comp-son":{//子組件
              template:"#myCompSon",
              props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣
              data:function(){
                return {
                  weather:{
                    tempre:"22.3℃",
                    weth:"rain",
                    wind:"3級"
                  }
                }
              },
              methods:{
                //在子組件中修改對象的屬性
                changeFondata:function(){
                  this.dog.hair = "紅"
                }
              }
            }
          }
        }
      }
    })

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: