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>

    如上即可

  • 相关阅读:
    HTML直接引用vue.min.js,bootstrap-vue.min.js,axios.min.js等开发一个页面(2)
    HTML直接引用vue.min.js,bootstrap-vue.min.js,axios.min.js等开发一个页面
    [Vue+Element UI]不知道总页码数时如何实现翻页
    [Vue] 报错: Uncaught (in promise)
    [Vue + Element UI] 单选框
    [Lombok] Lombok的使用和常用注解使用示例
    Eclipse的Web项目开发:Maven插件jetty服务器的关闭
    [Python] 电脑同时安装python2和python3, 如何实现切换使用
    [Yaml] YAML 入门教程
    k8s ha的安装
  • 原文地址:https://www.cnblogs.com/_error/p/9701136.html
Copyright © 2011-2022 走看看