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>

    如上即可

  • 相关阅读:
    centos7安装nginx和php7启动脚本
    centos7 安装nginx遇到的坑
    php7.2 编译遇到的坑
    yum源更新
    redis
    nginx日志分割
    Docker部署LNMP完整教程
    浅谈JavaScript词法分析步骤
    PHP面向对象中的重要知识点(一)
    Mysql精华版(命令大全)
  • 原文地址:https://www.cnblogs.com/_error/p/9701136.html
Copyright © 2011-2022 走看看