淺談vue的props,data,computed變化對(duì)組件更新的影響
本文介紹了vue的props,data,computed變化對(duì)組件更新的影響,分享給大家,廢話不多說(shuō),直接上代碼
/** this is Parent.vue */ <template> <div> <div>{{'parent data : ' + parentData}}</div> <div>{{'parent to children1 props : ' + parentToChildren1Props}}</div> <div>{{'parent to children2 props : ' + parentToChildren2Props}}</div> <div> <el-button @click="changeParentData">change parent data</el-button> <el-button @click="changeParentToChildren1Props">change parent to children1 data</el-button> <el-button @click="changeParentToChildren2Props">change parent to children2 data</el-button> </div> <my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1> <my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2> </div> </template> <script> import Children1 from './Children1'; import Children2 from './Children2'; export default{ name: 'parent', data() { return { parentData: 'ParentData', parentToChildren1Props: 'ParentToChildren1Props', parentToChildren2Props: 'ParentToChildren2Props' } }, beforeCreate: function() { console.log('*******this is parent beforeCreate*********'); }, created: function() { console.log('######this is parent created######'); }, beforeMount: function() { console.log('------this is parent beforeMount------'); }, mounted: function() { console.log('++++++this is parent mounted++++++++'); }, beforeUpdate: function() { console.log('&&&&&&&&this is parent beforeUpdate&&&&&&&&'); }, updated: function() { console.log('$$$$$$$this is parent updated$$$$$$$$'); }, methods: { changeParentData: function() { this.parentData = 'changeParentData' }, changeParentToChildren1Props: function() { this.parentToChildren1Props = 'changeParentToChildren1Props' }, changeParentToChildren2Props: function() { this.parentToChildren2Props = 'changeParentToChildren2Props' } }, components: { 'my-children1': Children1, 'my-children2': Children2 } } </script>
/** this is Children1.vue */ <template> <div> <div>{{'children1 data : ' + children1Data}}</div> <div>{{'parent to children1 props : ' + children1Props}}</div> <div>{{'parent to children1 props to data : ' + children1PropsData}}</div> <div> <el-button @click.native="changeChildren1Data">change children1 data</el-button> <el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button> </div> </div> </template> <script> export default { name: 'children1', props: ['children1Props'], data() { return { children1Data: 'Children1Data' } }, computed: { children1PropsData: function() { return this.children1Props } }, beforeCreate: function() { console.log('*******this is children1 beforeCreate*********'); }, created: function() { console.log('######this is children1 created######'); }, beforeMount: function() { console.log('------this is children1 beforeMount------'); }, mounted: function() { console.log('++++++this is children1 mounted++++++++'); }, beforeUpdate: function() { console.log('&&&&&&&&this is children1 beforeUpdate&&&&&&&&'); }, updated: function() { console.log('$$$$$$$this is children1 updated$$$$$$$$'); }, methods: { changeChildren1Data: function() { this.children1Data = 'changeChildren1Data' }, emitParentToChangeChildren1Props: function() { console.log('emitParentToChangeChildren1Props'); this.$emit('changeParentToChildren1Props'); } } } </script>
/** this is Children2.vue */ <template> <div> <div>{{'children2 data : ' + children2Data}}</div> <div>{{'parent to children2 props : ' + children2Props}}</div> <div>{{'parent to children2 props to data : ' + children2PropsData}}</div> <div> <el-button @click.native="changeChildren2Data">change children2 data</el-button> <el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button> </div> </div> </template> <script> export default { name: 'children2', props: ['children2Props'], data() { return { children2Data: 'Children2Data', children2PropsData: this.children2Props } }, beforeCreate: function() { console.log('*******this is children2 beforeCreate*********'); }, created: function() { console.log('######this is children2 created######'); }, beforeMount: function() { console.log('------this is children2 beforeMount------'); }, mounted: function() { console.log('++++++this is children2 mounted++++++++'); }, beforeUpdate: function() { console.log('&&&&&&&&this is children2 beforeUpdate&&&&&&&&'); }, updated: function() { console.log('$$$$$$$this is children2 updated$$$$$$$$'); }, methods: { changeChildren2Data: function() { this.children2Data = 'changeChildren2Data' }, emitParentToChangeChildren2Props: function() { this.$emit('changeParentToChildren2Props'); } } } </script>
- 父組件改變props,子組件如果直接使用props,會(huì)觸發(fā)子組件更新
- 父組件改變props,子組件如果將props放進(jìn)data中再使用,不會(huì)觸發(fā)子組件更新
- 父組件改變props,子組件如果將props放進(jìn)computed中再使用,會(huì)觸發(fā)子組件更新
- data,props和computed的變化都會(huì)觸發(fā)組件更新
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何通過(guò)Vue實(shí)現(xiàn)@人的功能
這篇文章主要介紹了如何通過(guò)vue實(shí)現(xiàn)微博中常見的@人的功能,同時(shí)增加鼠標(biāo)點(diǎn)擊事件和一些頁(yè)面小優(yōu)化。感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2021-12-12詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源
本篇文章主要介紹了詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09vue3中關(guān)于i18n字符串轉(zhuǎn)義問題
這篇文章主要介紹了vue3中關(guān)于i18n字符串轉(zhuǎn)義問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問題
這篇文章主要介紹了解決Vite無(wú)法分析出動(dòng)態(tài)import的類型,控制臺(tái)出警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05Vue + AnimeJS實(shí)現(xiàn)3d輪播圖的詳細(xì)代碼
輪播圖在開發(fā)中是經(jīng)常用到的,3D輪播圖是其中最常用的一種,所以在這篇文章中將給大家介紹Vue + AnimeJS實(shí)現(xiàn)3d輪播圖,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-01-01vue實(shí)現(xiàn)動(dòng)態(tài)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)動(dòng)態(tài)面包屑導(dǎo)航的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04