vue 中父组件向子组件传递数据用 props, 但是子组件是无法修改它的。如果子组件需要动态修改它就只能自造一个对应的 data 域。比如
<!-- -->
<template>
<div>这里是汇总信息
<ul>
<li>{{total}}</li>
<li>{{amount}}</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</template>
<script>
export default {
name: "Total",
props:['total'],
data () {
return {
amount:this.total
};
},
//watch很重要。data()函数只是在初始化的时候会运行一次。所以总是空。而我们异步过来的数据,需要watch他 才能得到。
watch:{
total:function(newVal,oldVal){
this.amount = newVal;
}
},
mounted(){
console.log(this.amount)
}
}
</script>
<style lang='scss' scoped>
</style>
watch很重要。data()函数只是在初始化的时候会运行一次。所以总是空。而我们异步过来的数据,需要watch他 才能得到。