遇到的問題

vue3的項目中, 升級了vant的版本(^4.0.7)后, 子組件中用v-model的地方出現(xiàn)了報錯

報錯的內(nèi)容

v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding combined with a v-on listener that emits update:x event instead.

解決問題

在閱讀vue3的文檔中看到了這么一段話

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

所有的 props 都遵循著單向綁定原則，props 因父組件的更新而變化，自然地將新的狀態(tài)向下流往子組件，而不會逆向傳遞。這避免了子組件意外修改父組件的狀態(tài)的情況，不然應(yīng)用的數(shù)據(jù)流將很容易變得混亂而難以理解。

另外，每次父組件更新后，所有的子組件中的 props 都會被更新到最新值，這意味著你不應(yīng)該在子組件中去更改一個 prop。若你這么做了，Vue 會在控制臺上向你拋出警告：

最后聲明了局部屬性后 上邊的報錯消失

prop 被用于傳入初始值；而子組件想在之后將其作為一個局部數(shù)據(jù)屬性。在這種情況下，最好是新定義一個局部數(shù)據(jù)屬性，從 props 上獲取初始值即可

局部屬性定義在了watch里

watch(() => props.isSortPopup, (newVal, oldVal) => {
  a.value = props.sortArr;
})
isSortPopup 是一個狀態(tài), 發(fā)現(xiàn)直接監(jiān)聽父組件值的話  并不是每次都觸發(fā), 所以在關(guān)閉, 打開的加了一個標識
這樣每次就可以監(jiān)聽到數(shù)據(jù)的變化

附章節(jié)鏈接, 僅供參考, 如有錯誤, 歡迎指出, 隨時交流

https://cn.vuejs.org/guide/components/props.html#one-way-data-flow

文檔上的內(nèi)容其實并沒有看太明白

不知道怎么去computed

為什么會定義在watch里呢

發(fā)現(xiàn)直接去a.value = props.sortArr 的話 得到的是一個初始值, 也就是父組件在聲明sortArr的最初狀態(tài)

const sortArr = ref([]);

總結(jié)

到此這篇關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決的文章就介紹到這了,更多相關(guān)vue3子組件綁定父組件值后報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論