vue子组件中data的数据从props中获取并不会动态更新问题

发表于   |   分类于   |     |  

[TOC]

父组件中的数据变化了是会动态更新到子组件的props上的，但是如果你在子组件的data中又定义了个变量引用了props中的值，这个子组件中的data变量是不会跟着props动态更新的。

解决办法就是子组件中使用watch跟踪下props中的变量。

1
2
3
4
5
6
// 父组件
<template>
  <div class="hello">
    <chart :info='info'/>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 子组件
<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>

解决办法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 子组件
<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>

热评文章