快捷導(dǎo)航

vue3子組件上綁定(v-model="xx")父組件傳過來的值后報(bào)錯(cuò)解決

更新時(shí)間：2023年07月27日 11:37:00 作者：芒果不吃罐頭

這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報(bào)錯(cuò)解決辦法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

遇到的問題

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里

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([]);

總結(jié)

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

您可能感興趣的文章: