Vue子組件中 data 從props中動態更新數據

考慮這樣一種情況，Vue 的父組件根據接口 api 獲取到數據后，動態更新到子組件的 props 上，這本身也是一個較為簡單的操作,

// 父組件
<template>
  <div class="hello">
    <chart :info='info'/>
  </div>
</template>

 

在子組件上把數據，直接渲染到模型上即可。

// 子組件
<template>
  <div class="hello">
    <ul>
      <!-- 此處 info 來自 props -->
      <li v-for="i in info" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    this.list = this.info.map(i => '0_'+i)
  },
}
</script>

 

走到這一步，都很順利，用 一個 list 數據進行動態更新。但如果需要對子組件上的數據進行操作再利用 組件 data 渲染，這時就會發現數據不能動態更新。

// 子組件
<template>
  <div class="hello">
    <ul>
      <!-- 此處 list 來自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    this.list = this.info.map(i => '0_'+i)
  },
}
</script>

這里需要用 watch 來進行跟蹤，如下即可

// 子組件
<template>
  <div class="hello">
    <ul>
      <!-- 此處list 來自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    this.list = this.info.map(i => '0_'+i)
  },
  watch: {
    info() {
      this.list = this.info
    }
  }
}
</script>

 

后記：

以上操作其實也是走了一些彎路，對於這種 通過對 props 數據操作再賦值給 子組件 data ，導致子組件 data 不能根據 父組件傳值變化而及時更新數據的情況。直接用計算屬性  computed  ： list 

// 子組件
<template>
  <div class="hello">
    <ul>
      <!-- 此處comp 來自 computed -->
      <li v-for="i in comp" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props:['info'],
  computed: {
    comp (){
      return this.info.map(i => '0_'+i)
    }
  },
}
</script>

如上即可