解决 vue中props值无法赋值给data域的问题

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他 才能得到。

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值