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

版权声明：1083077511 qq 欢迎勾搭 https://blog.csdn.net/baidu_31333625/article/details/84789416

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