快捷導(dǎo)航

Vue組件之單向數(shù)據(jù)流的解決方法

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

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

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

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

兩種情況：

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

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

這里的this.sers就是來源于子組件的props數(shù)據(jù)。

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

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

HTML部分

 <div id= "container" v-cloak>
    <my-compon></my-compon>
  </div>
  <!-- 父組件模板 -->
  <template id="myComp">
    <div>
      <h3>大家好，我是{{animal.name}}貓，我已經(jīng)和Jerry斗爭(zhēng)了{(lán){animal.age}}年了</h3>
 給綁定的數(shù)據(jù)使用.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}},風(fēng)力{{weather.wind}},溫度{{weather.tempre}},{{animalname}},{{animalage}}</h3>
      <button @click = "changeFatDaAge">點(diǎn)擊父組件中的數(shù)據(jù)會(huì)跟著改變方式一</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指的是當(dāng)前父組件的實(shí)例
              this.animal.name = "Kitty"http://改變父組件中的數(shù)據(jù)
            }
          },
          components:{
            "my-comp-son":{//子組件
              template:"#myCompSon",
              props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣
              data:function(){
                return {
                  weather:{
                    tempre:"22.3℃",
                    weth:"rain",
                    wind:"3級(jí)"
                  }
                }
              },
              methods:{
                // 給v-bind使用修飾符.sync,需要顯式地觸發(fā)一個(gè)更新事件（this.$emit("update:你要更改的props數(shù)據(jù)", 改變后的值)）
                changeFatDaAge:function(){
                  // this.animalage = 19;
                  this.$emit("update:animalage", 19)//通過這個(gè)方法來改變子組件props數(shù)據(jù)，并引起父組件相應(yīng)數(shù)據(jù)的改變
                }
              }
            }
          }
        }
      }
    })

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

第二種：將父組件的數(shù)據(jù)包裝成對(duì)象并綁定到子組件上，在子組件中修改對(duì)象的屬性（其實(shí)并沒有真正改變?cè)搶?duì)象，因?yàn)閷?duì)象是引用類型的數(shù)據(jù)，雖然屬性發(fā)生了變化，但指針并沒有發(fā)生變化），常用。例如：

HTML部分：

<div id= "container" v-cloak>
    <my-compon></my-compon>
  </div>
  <!-- 父組件模板 -->
  <template id="myComp">
    <div>
      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
      <!-- 將父組件的數(shù)據(jù)包裝成對(duì)象并綁定到子組件上，在子組件中修改對(duì)象的屬性，在這是dog -->
      <my-comp-son :dog = "dog"></my-comp-son>
    </div>
  </template>
  <!-- 子組件模板 -->
  <template id="myCompSon">
    <div>
      <h4>一只皮毛是{{dog.hair}}色，身高是{{dog.height}}的狗狗,在散步。。。</h4>
      <button @click="changeFondata">點(diǎn)擊父組件中的數(shù)據(jù)會(huì)跟著改變方式二</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指的是當(dāng)前父組件的實(shí)例
              this.animal.name = "Kitty"http://改變父組件中的數(shù)據(jù)
            }
          },
          components:{
            "my-comp-son":{//子組件
              template:"#myCompSon",
              props:["animalname","animalage","dog"],//地位和data一樣，獲取方式也是一樣
              data:function(){
                return {
                  weather:{
                    tempre:"22.3℃",
                    weth:"rain",
                    wind:"3級(jí)"
                  }
                }
              },
              methods:{
                //在子組件中修改對(duì)象的屬性
                changeFondata:function(){
                  this.dog.hair = "紅"
                }
              }
            }
          }
        }
      }
    })

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: