今天在开发的时候,碰到一个bug
。就是修改了父组件传递给子组件的值,但是子组件接收父组件的props
值的时候竟然没有更新视图。举例代码如下:
组件代码
<template>
<h1>{{ showData }}</h1>
</template>
<script>
export default {
name: "Son",
props: {
Data: {
type: Number,
default: 0
}
},
data() {
return {
showData: 0
};
},
created() {
this.showData = this.Data.toFixed(2);
}
};
</script>
这里props
中Data
的type
是一个Number
,代码中在created
里面赋值给showData
,并做了计算处理,这个初衷是为了不想改变父组件传过来的值,不违反单向数据流传递规则。