标签：watch 更新 行操作 har script template 操作 exp 简单
考虑这样一种情况，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>
标签：watch 更新 行操作 har script template 操作 exp 简单
原文地址：https://www.cnblogs.com/_error/p/9701136.html
