問題描述

官方文檔

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修飾符

原理解釋

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

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

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

然后父組件可以監聽那個事件并根據需要更新一個本地的數據屬性。例如：

<text-documentv-bind:title="doc.title"v-on:update:title="doc.title = $event" ></text-document>

為了方便起見，我們為這種模式提供一個縮寫，即?.sync?修飾符：

<text-document v-bind:title.sync="doc.title"></text-document>

修飾符sync的功能：當一個子組件改變了一個 prop 的值時，這個變化也會同步到父組件中所綁定。?

解決方案

在一個包含title prop的子組件中，

props: {title: '',},

可以用以下方法賦新值：

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

然后在父組件中：

<child-component :title.sync="啦啦啦"></child-component>

?

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

參考文章

https://blog.csdn.net/weixin_45266779/article/details/100017250

https://www.jianshu.com/p/6b062af8cf01

https://segmentfault.com/a/1190000020297667

總結

以上是生活随笔為你收集整理的Vue——prop双向绑定解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。