考虑这样一种情况,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>

复制代码

 或直接用计算属性  computed  : list 

Logo

前往低代码交流专区

更多推荐