Vue子组件中 data 从props中动态更新数据

时间:2024-03-17 14:46:24

考虑这样一种情况,Vue 的父组件根据网络请求获取到数据后,动态更新到子组件的 props 上,

// 父组件
<template>
  <div class="parent">
    <chart :info=\'info\'/>
  </div>
</template>

 在子组件上把数据直接渲染到模型上即可。

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处 info 来自 props -->
      <li v-for="i in info" :key=\'i\'>{{i}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props:[\'info\'],
  data () {},
}
</script>

走到这一步,都很顺利,子组件能响应父组件的数据,进行动态更新。

但是

实际项目中,往往要对子组件上接收到的数据进行操作处理,然后才能通过 data 渲染到页面上,这时就会发现,父组件上的数据变化,子组件不再能响应并及时更新了。

// 子组件
<template>
  <div class="child">
    <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>

原因很简单,从 props 的 info 传递给 data 的 list ,只有一次操作,就是在 mounted 中,往后即使 props 的 info 发生了变化,data 也接收不到。

问题在于数据在传递过程中不能及时关联,针对这一点,可以用 watch 来进行跟踪,如下即可

// 子组件
<template>
  <div class="child">
    <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.map(i => \'0_\'+i)
    }
  }
}
</script>

 

后记:

以上操作其实也是走了一些弯路,对于这种 通过对 props 数据操作再赋值给 子组件 data ,导致子组件 data 不能根据 父组件传值变化而及时更新数据的情况。直接用计算属性  computed  : list 

// 子组件
<template>
  <div class="child">
    <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>

如上即可