您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章将为大家详细讲解有关vue中props,data,computed变化对组件更新的影响有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
代码:
/** 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,会触发子组件更新
父组件改变props,子组件如果将props放进data中再使用,不会触发子组件更新
父组件改变props,子组件如果将props放进computed中再使用,会触发子组件更新
data,props和computed的变化都会触发组件更新
关于“vue中props,data,computed变化对组件更新的影响有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。