OveUI 博客
菜鸟前端笔记

vue的props(数据类型为Array、Object)处理

  • 注意在 JavaScript 中对象和数组是通过引用传入的;
  • 对于一个数组(或对象)类型的 prop 来说,在子组件中改变这个数组(或对象)本身将会影响到父组件的状态。
  • 所以不可以直接操作数组(或对象)类型prop。
export default {
  props: {
    fileList: Array       // 接收父组件传来的参数
  },
  data() {
    return {
      list: []          // 使用list来接管fileList,此时可以操作list而不会影响父组件
    }
  },
  watch: {
    fileList: {           // 监听fileList,给list赋值
      handler(val) {
        if (val) {
          this.list = val
        }
      },
      immediate: true   // 子组件加载时立即执行
    }
  },
  computed: {
    displayList() {      // 此处操作list
      return this.list.map(item => {
        return item || ''
      })
    }
  }
}
赞(0) 打赏
未经允许不得转载:UI 树意境 » vue的props(数据类型为Array、Object)处理
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏