zoukankan      html  css  js  c++  java
  • 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>

    如上即可

  • 相关阅读:
    移动端调试利器-vConsole
    html手机调试
    vue实现PC端分辨率适配
    uniapp 判断 IOS和Android的GPS是否开启并设置启动
    Fiddler抓包工具使用
    js对象数组多字段排序
    时间戳转换时间格式
    从一个数组中删除另一个数组中存在的元素
    Python_下载二次登录后的页面源码
    Python_ip被封用代理
  • 原文地址:https://www.cnblogs.com/_error/p/9701136.html
Copyright © 2011-2022 走看看