目錄

• 官網解釋
• 單向資料流是什麼
• 示例
• a-input原始用法
• 元件程式碼
• 使用場景
• 總結

官網解釋

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態，從而導致你的應用的資料流向難以理解。額外的，每次父級元件發生變更時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在一個子元件內部改變 prop。如果你這樣做了， 會在瀏覽器的控制檯中發出警告。

單向資料流是什麼

單向資料流指只能從一個方向來修改狀態。下圖是單向資料流的極簡示意：

與單向資料流對對應的是雙向資料流（也叫雙向繫結）。在雙向資料流中，Model（可以理解為狀態的集合） 中可以修改自己或其他Model的狀態， 使用者的操作（如在輸入框中輸入內容）也可以修改狀態。這使改變一個狀態有可能會觸發一連串的狀

與雙向資料流比，在單向資料流中，當你需要修改狀態，完全重新開始走一個修改的流程。這限制了狀態修改的方式，讓狀態變得可預測，容易除錯。

示例

我們通過一個示例來解釋單向資料流與雙向繫結，這個示例是對ant-design-vue表單元件的二次封裝

a-input原始用法

<template>
    <a-input v-model='data'/>
</template>

<script>
export default {
    data() {
        return {
            data: ''
        }
    }
}
</script>

在data中宣告的屬性會通過Object.definePropty方法為其新增get和set方法，使其成為響應式資料。v-model是一個語法糖，在vue 2.2.0版本後新增了model屬性

官方解釋

允許一個自定義元件在使用v-model時定製 prop 和 event。預設情況下，一個元件上的v-model會把value用作 prop 且把input用作 event，但是一些輸入型別比如單選框和複選框按鈕可能想使用valueprop 來達到不同的目的。使用model選項可以迴避這些情況產生的衝突。

我們利用這個屬性來對上述input元件做二次封裝

元件程式碼

<template>
    <a-input :value='currentValue' @change='onInputChange'/>
</template>

<script>
export default {
    data() {
        return {
            currentValue: this.value
        }
    },model: {
        event: 'change',prop: 'value'
    },props:{
        value: {
            type: String
        }
    },watch: {
        value: {
            handler(newVal) {
                this.currentValue = newVal
            }
        }
    },onInpwww.cppcns.com
 
utChange(e) {
        this.$emit('change',e.target.value)
    }
}
</script>

在父元件中使用

<template>
    <my-input v-model='data' />
</template>

<script>
export default {
    data() {
        return {
            data:''
        }
    }
}
</script>

上述子元件中的currentValue是實際input元件的值，他的值是根據父元件傳入的值得出的，input標籤元件的change事件來觸發父元件的change事件，從而改變傳入子元件props中value的值。這就解釋了單項資料流，父元件通過props向子元件傳遞值，子元件通過emit事件來通知父元件修改值，子元件不在自身對父元件傳遞過來的props做任何修改，都是通過父元件來更新props,從而達到子元件更新自身狀態。

使用場景

當我們在實現一個由資料渲染的複雜表單時，那麼我們的設計就可以採用這種模式，通過props以及emit傳遞,保證子元件的事件觸發根節點的資料更新，從而更新子孫元件的狀態。

總結

到此這篇關於vue單向資料流的文章就介紹到這了,更多相關vue單向資料流內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！