Vue子組件props從父組件接收數據並存入data
經過測試父組件中傳遞過來的數據有以下特點:
1.不允許直接修改
如果直接使用 this.xxx = action 操作的話 控制臺會報下面這個錯誤
大概的意思是 你小子不要隨便劈我瓜,我父組件的瓜豈是你能變的,父組件重新渲染時,這個值會被覆蓋,你小子自個兒用計算屬性或者data存一下吧
2.存在異步的情況
假如父組件該數據是後臺接口獲取的數據,那麼會產生這種情況。子組件的生命周期都已經走完瞭,父組件的數據還沒傳過來。因為V8引擎的運行速度是很快的,萬分之一毫秒都等不瞭,如果是異步的話,子組件裡是沒有辦法操作這個數據的。
父組件 <template> <div> <children :father="father"></children> </div> </template> <script> import children from "./children"; export default { components: { children }, data() { return { father: null }; }, mounted() { setTimeout(() => { this.father = { name: "父親" }; }, 1000); }, methods: {} }; </script>
子組件 <template> <div></div> </template> <script> export default { data() { return { student: { name: "張三" } }; }, props: { father: { type: Object, default: () => {} } }, watch: { father: { handler(newVal) { this.fatherData =newVal console.log(this.fatherData); }, deep: true, immediate: true } }, created() {}, mounted() { console.log(this.father); }, methods: {} }; </script>
解決思路
第一步
在父組件中使用子組件時,為子組件加上v-if='flag',初始賦值為flag=false,等待異步賦值操作完成後修改flag=true,這個操作不單單隻試用於異步情況,建議隻要涉及到數據流的操作與加工,都加上v-if限制,保證數據獲取到之後再開始運作子組件的生命周期。
//也可以這樣,簡潔一些 <div> <children v-if="father" :father="father"></children> </div>
第二步
在子組件中對props進行watch監聽,變化後立刻將newVal賦值到data中並保存起來
watch: { father: { handler(newVal) { this.fatherData =newVal console.log(this.fatherData); }, deep: true, immediate: true } },
這裡還會出現一種額外的情況,就是watch中可以賦值到,也能打印出具體的值出來,但是一到其他生命周期中使用確是空,這個情況
這種情況可能是對象共享地址,或者數據正處於處理中,應當自行進行深克隆一份進行傳遞,一般隻要方法寫得比較健壯,此種情況基本不會出現
到此這篇關於Vue子組件props從父組件接收數據並存入data的文章就介紹到這瞭,更多相關Vue props內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!