浅谈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() {
antdesignvue 表格合计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>
1. ⽗组件改变props，⼦组件如果直接使⽤props，会触发⼦组件更新
2. ⽗组件改变props，⼦组件如果将props放进data中再使⽤，不会触发⼦组件更新
3. ⽗组件改变props，⼦组件如果将props放进computed中再使⽤，会触发⼦组件更新
4. data，props和computed的变化都会触发组件更新
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。

antdesign vue scopedslots 用法
« 上一篇
AntDesignmoment对象和字符串之间的相互转化教程
下一篇 »

发表评论