Vue.js 的 prop 如何實現雙向綁定

最近遇到了一個問題，就是 Vue.js 中的 prop 如何實現雙向綁定比較好。

之前我都是把 prop 傳遞到子組件，然后子組件里面直接把 prop 直接改了，這樣雖然能把結果反映到父組件，但并不是一個很好的解決方案。

比如我就經常遇到這樣的 Warning：

Avoid mutating a prop directly since the value will be overwritten…

實際上，用事件傳遞的方式把修改從子組件傳到父組件是比較不錯的方式，這就需要子組件 $emit 一個事件，然后父組件監聽這個事件，然后將接收到的值修改就好了。

官方文檔的說明如下：

在有些情況下，我們可能需要對一個 prop 進行 “雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以變更父組件，且在父組件和子組件都沒有明顯的變更來源。

這也是為什么我們推薦以 update:myPropName 的模式觸發事件取而代之。舉個例子，在一個包含 title prop 的假設的組件中，我們可以用以下方法表達對其賦新值的意圖：

1

this.$emit('update:title', newTitle)

所以這里推薦的就是使用 update:propName 來實現。

這樣的話，父組件原生的寫法如下：

1

2

3

4

v-bind:title="doc.title"

v-on:update:title="doc.title = $event"

>

這里 prop 的名字叫做 title，子組件需要接收到這個值，然后各種操作進行修改都沒關系。

比如子組件可以這么寫：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

這樣當 titleData 更新的時候，父組件的 title 就更新了。

這時候父組件可以簡寫為：

1

注意帶有 .sync 修飾符的 v-bind 不能和表達式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是無效的)。取而代之的是，你只能提供你想要綁定的 property 名，類似 v-model。

另外當我們用一個對象同時設置多個 prop 的時候，也可以將這個 .sync 修飾符和 v-bind 配合使用：

1

這樣會把 doc 對象中的每一個 property (如 title) 都作為一個獨立的 prop 傳進去，然后各自添加用于更新的 v-on -。

將 v-bind.sync 用在一個字面量的對象上，例如 v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因為在解析一個像這樣的復雜表達式的時候，有很多邊緣情況需要考慮。

以上，完畢。

javaScript Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。