浅谈vue的props，data，computed变化对组件更新的影响
更新时间：2018年01月16日 09:50:56 作者：waiting_h
本篇文章主要介绍了浅谈vue的props，data，computed变化对组件更新的影响，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了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.js的应用时,随着项目规模的扩大,单个文件的体积也会随之增长,特别是当涉及到大量的依赖库和复杂的业务逻辑时,本文将详细介绍如何使用Webpack来优化Vue项目的打包流程,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了关于vue-treeselect绑值、回显等常见问题的总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue 项目代码拆分的方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了详解如何创建并发布一个vue组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果,我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件,感兴趣的朋友一起看看吧2024-04-04
这篇文章主要介绍了element-ui自定义表格如何给input双向绑定数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了vue可视化大屏实现无线滚动列表飞入效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要给大家介绍了关于vue内点击url下载文件的最佳解决方案,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要为大家详细介绍了vue日期时间工具类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论