本文小編為大家詳細(xì)介紹“vue數(shù)據(jù)流是不是單向的”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue數(shù)據(jù)流是不是單向的”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

創(chuàng)新互聯(lián)公司自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站制作、成都做網(wǎng)站、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊(duì)及專業(yè)的網(wǎng)站設(shè)計師團(tuán)隊(duì)。

是單向的。雖然vue有雙向綁定“v-model”，但是vue父子組件之間數(shù)據(jù)傳遞，仍然還是遵循單向數(shù)據(jù)流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來的props，子組件只能通過事件通知父組件進(jìn)行數(shù)據(jù)更改。vue是單向數(shù)據(jù)流，數(shù)據(jù)流向是從上到下，從父組件傳遞到子組件的。

不要和vue的雙向數(shù)據(jù)綁定搞混了；雙向數(shù)據(jù)綁定說的是視圖和模板之間的渲染關(guān)系，并不是數(shù)據(jù)的流向關(guān)系!

vue父子組件之間數(shù)據(jù)傳遞是遵循單向數(shù)據(jù)流的，父組件可以向子組件傳遞props，但是子組件不能修改父組件傳遞來的props，子組件只能通過事件通知父組件進(jìn)行數(shù)據(jù)更改。

1，單向數(shù)據(jù)流：

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。

額外的，每次父級組件發(fā)生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，也將會改變父組件的狀態(tài)。

2，Prop是通過引用傳入的：

注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變變更這個對象或數(shù)組本身將會影響到父組件的狀態(tài)。

深入理解 Vue 單向數(shù)據(jù)流

1、v-model 用在 input 元素上

v-model在使用的時候很像雙向綁定的（實(shí)際上也是。。。），但是 Vue 是單項(xiàng)數(shù)據(jù)流，v-model 只是語法糖而已：

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

第一行的代碼其實(shí)只是第二行的語法糖。然后第二行代碼還能簡寫成這樣：

<input :value="something" @input="something = $event.target.value" />

要理解這行代碼，首先你要知道 input 元素本身有個 oninput 事件，這是 HTML5 新增加的，類似 onchange ，每當(dāng)輸入框內(nèi)容發(fā)生變化，就會觸發(fā) oninput ，通過 $event 把最新的 value 傳遞給 something。

我們仔細(xì)觀察語法糖和原始語法那兩行代碼，可以得出一個結(jié)論： 在給 input 元素添加 v-model 屬性時，默認(rèn)會把 value 作為元素的屬性，然后把 'input' 事件作為實(shí)時傳遞 value 的觸發(fā)事件

2、v-model 用在組件上

v-model 不僅僅能在 input 上用，在組件上也能使用，拿官網(wǎng)上的demo看。

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'], // 為什么這里要用 value 屬性，value在哪里定義的？
  methods: {
    // 不是直接更新值，而是使用此方法來對輸入值進(jìn)行格式化和位數(shù)限制
    updateValue: function (value) {
      var formattedValue = value
        // 刪除兩側(cè)的空格符
        .trim()
        // 保留 2 位小數(shù)
        .slice(
          0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      // 如果值尚不合規(guī)，則手動覆蓋為合規(guī)的值
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // 通過 input 事件帶出數(shù)值
      // <!--為什么這里把 'input' 作為觸發(fā)事件的事件名？`input` 在哪定義的？-->
      this.$emit('input', Number(formattedValue))
    }
  }
})

如果你知道這兩個問題的答案，那么恭喜你真正掌握了 v-model，如果你沒明白，那么可以看下這段代碼：

<currency-input v-model="price"></currency-input>
所以在組件中使用時，它相當(dāng)于下面的簡寫：
//上行代碼是下行的語法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>

所以，給組件添加 v-model 屬性時，默認(rèn)會把 value 作為組件的屬性，然后把 'input' 值作為給組件綁定事件時的事件名。這在寫組件時特別有用。

3、v-model 的缺點(diǎn)和解決辦法

在創(chuàng)建類似復(fù)選框或者單選框的常見組件時，v-model就不好用了。

<input type="checkbox" v-model="something" />

v-model 給我們提供好了 value 屬性和 oninput 事件，但是，我們需要的不是 value 屬性，而是 checked 屬性，并且當(dāng)你點(diǎn)擊這個單選框的時候不會觸發(fā) oninput 事件，它只會觸發(fā) onchange 事件。

因?yàn)?v-model 只是用到了 input 元素上，所以這種情況好解決：

<input type="checkbox" :checked="value" @change="change(value, $event)"

當(dāng) v-model 用到組件上時：

<checkbox v-model="value"></checkbox>

Vue.component('checkbox', {
  tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
  props: ['value'],
  data: function () {
        return {
            //這里為什么要定義一個局部變量，并用 prop 的值初始化它。
            currentValue: this.value
        };
    },
  methods: {
    change: function ($event) {
      this.currentValue = $event.target.checked;
      this.$emit('input', this.currentValue);  
    }
})

在 Vue 2.2 版本，你可以在定義組件時通過 model 選項(xiàng)的方式來定制 prop/event 。

4、vue 組件數(shù)據(jù)流

從上面 v-model 的分析我們可以這么理解，雙向數(shù)據(jù)綁定就是在單向綁定的基礎(chǔ)上給可輸入元素（input、textare等）添加了 change(input) 事件，來動態(tài)修改 model 和 view ，即通過觸發(fā)（$emit）父組件的事件來修改mv來達(dá)到 mvvm 的效果。而 vue 組件間傳遞數(shù)據(jù)是單向的，即數(shù)據(jù)總是由父組件傳遞到子組件，子組件在其內(nèi)部可以有自己維護(hù)的數(shù)據(jù)，但它無權(quán)修改父組件傳遞給它的數(shù)據(jù)，當(dāng)開發(fā)者嘗試這樣做的時候，vue 將會報錯。這樣做是為了組件間更好的解耦，在開發(fā)中可能有多個子組件依賴于父組件的某個數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個子組件變化會引發(fā)所有依賴這個數(shù)據(jù)的子組件發(fā)生變化，所以    vue 不推薦子組件修改父組件的數(shù)據(jù)，直接修改 props 會拋出警告。流程圖如下：

所以，當(dāng)你想要在子組件去修改 props 時，把這個子組件當(dāng)成父組件那樣用，所以就有了

• 1、定義一個局部變量，并用 prop 的值初始化它。

• 2、定義一個計算屬性，處理 prop 的值并返回。

讀到這里，這篇“vue數(shù)據(jù)流是不是單向的”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：vue數(shù)據(jù)流是不是單向的
本文網(wǎng)址：http://sd-ha.com/article40/popeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、外貿(mào)建站、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計公司、域名注冊、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)