vue指的是單項(xiàng)數(shù)據(jù)流還是雙向數(shù)據(jù)流

這篇文章給大家分享的是有關(guān)vue指的是單項(xiàng)數(shù)據(jù)流還是雙向數(shù)據(jù)流的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)武安,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

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

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

雙向綁定

簡(jiǎn)而言之，雙向綁定就是model的更新會(huì)觸發(fā)view的更新，view的更新會(huì)觸發(fā)model的更新，它們的作用是相互的
[圖片上傳失敗...(image-81a06f-1556975918443)]

單向數(shù)據(jù)流

簡(jiǎn)而言之，單向數(shù)據(jù)流就是model的更新會(huì)觸發(fā)view的更新，view的更新不會(huì)觸發(fā)model的更新，它們的作用是單向的

這不是廢話嗎，誰(shuí)都知道的

下面就是真正的干貨了，板凳坐好

<ul>
<li>Vue是單向數(shù)據(jù)流，不是雙向綁定</li>
<li>Vue的雙向綁定不過(guò)是語(yǔ)法糖</li>
<li>Object.definePropert是用來(lái)做響應(yīng)式更新的</li>
</ul>

v-model的實(shí)現(xiàn)原理

• 放在組件上

父組件

  <AnalysisSub v-model="phoneInfo" :zip-code.sync="zipCode" /

子組件

<template>
  <div>
    <input
      :value="phoneInfo.phone"
      type="number"
      placeholder="手機(jī)號(hào)"
      @input="handlePhoneChange"
    />
    <input
      :value="zipCode"
      type="number"
      placeholder="郵編"
      @input="handleZipCodeChange"
    />
  </div></template><script>export default {
  name: "PersonalInfo",
  model: {
    prop: "phoneInfo", // 默認(rèn) value
    event: "change" // 默認(rèn) input
  },
  props: {
    phoneInfo: Object,
    zipCode: String
  },
  methods: {
    handlePhoneChange(e) {
      this.$emit("change", {
        ...this.phoneInfo,
        phone: e.target.value
      });
    },
    handleZipCodeChange(e) {
      this.$emit("update:zipCode", e.target.value);
    }
  }
};</script>

父組件的寫(xiě)法等同于

 <AnalysisSub :phone-info="phoneInfo" @change="val => (phoneInfo = val)"
    :zip-code="zipCode"  @update:zipCode="val => (zipCode = val)"/>

• 放在input元素上

其實(shí)上文已經(jīng)體現(xiàn)了

<input v-model=“phoneInfo.phone”/>
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"

以上兩句是相等的

TIPS

model 2.2.0+

允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的 v-model 會(huì)把 value 用作 prop 且把 input 用作 event，但是一些輸入類(lèi)型比如單選框和復(fù)選框按鈕可能想使用 value prop 來(lái)達(dá)到不同的目的。使用 model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

.sync修飾符 2.3.0+

在有些情況下，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會(huì)帶來(lái)維護(hù)上的問(wèn)題，因?yàn)樽咏M件可以修改父組件，且在父組件和子組件都沒(méi)有明顯的改動(dòng)來(lái)源。

感謝各位的閱讀！關(guān)于“vue指的是單項(xiàng)數(shù)據(jù)流還是雙向數(shù)據(jù)流”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站標(biāo)題：vue指的是單項(xiàng)數(shù)據(jù)流還是雙向數(shù)據(jù)流
文章轉(zhuǎn)載：http://www.muchs.cn/article6/ghggog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、ChatGPT、定制網(wǎng)站、面包屑導(dǎo)航、定制開(kāi)發(fā)、服務(wù)器托管

廣告

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