遇到的問題
vue3的項(xiàng)目中, 升級(jí)了vant的版本(^4.0.7)后, 子組件中用v-model的地方出現(xiàn)了報(bào)錯(cuò)
報(bào)錯(cuò)的內(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)向下流往子組件，而不會(huì)逆向傳遞。這避免了子組件意外修改父組件的狀態(tài)的情況，不然應(yīng)用的數(shù)據(jù)流將很容易變得混亂而難以理解。
另外，每次父組件更新后，所有的子組件中的 props 都會(huì)被更新到最新值，這意味著你不應(yīng)該在子組件中去更改一個(gè) prop。若你這么做了，Vue 會(huì)在控制臺(tái)上向你拋出警告：
最后聲明了局部屬性后 上邊的報(bào)錯(cuò)消失
prop 被用于傳入初始值；而子組件想在之后將其作為一個(gè)局部數(shù)據(jù)屬性。在這種情況下，最好是新定義一個(gè)局部數(shù)據(jù)屬性，從 props 上獲取初始值即可
局部屬性定義在了watch里
#pic_center文章來源：http://www.zghlxwxcb.cn/news/detail-441212.html
watch(() => props.isSortPopup, (newVal, oldVal) => {
a.value = props.sortArr;
})
isSortPopup 是一個(gè)狀態(tài), 發(fā)現(xiàn)直接監(jiān)聽父組件值的話 并不是每次都觸發(fā), 所以在關(guān)閉, 打開的加了一個(gè)標(biāo)識(shí)
這樣每次就可以監(jiān)聽到數(shù)據(jù)的變化
附章節(jié)鏈接, 僅供參考, 如有錯(cuò)誤, 歡迎指出, 隨時(shí)交流
https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
文檔上的內(nèi)容其實(shí)并沒有看太明白
不知道怎么去computed
為什么會(huì)定義在watch里呢
發(fā)現(xiàn)直接去a.value = props.sortArr 的話 得到的是一個(gè)初始值, 也就是父組件在聲明sortArr的最初狀態(tài)
const sortArr = ref([]);文章來源地址http://www.zghlxwxcb.cn/news/detail-441212.html
到了這里，關(guān)于vue3 子組件上綁定(v-model=“xx“) 父組件傳過來的值后報(bào)錯(cuò)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
