美文网首页
props 传值,父组件向子组件传递对象可以直接修改的问题

props 传值,父组件向子组件传递对象可以直接修改的问题

作者: 缘之空_bb11 | 来源:发表于2024-05-20 10:28 被阅读0次

    Vue 中 props 传值,父组件向子组件传递对象可以直接修改的问题

    • 强调 VUE 的单向数据流动的规则;

    • 子组件 prop 的使用:
      除非只是对数据进行展示使用,否则应尽量避免直接使用 prop 参数;

      若需要修改prop 的情况:
      1. 针对修改数组和对象的属性,可以定义一个本地的 data property 并将这个 prop 作为其初始值:(定义新的Data 中的属性,就是起到了隔离的作用)
      作为一个通用规则,应该避免直接修改任何 prop,包括对象和数组,因为这种做法无视了单向数据绑定,且可能会导致意料之外的结果。

    props: {
        // 初始化计数
        initialCounter: {
         type: Number,
         default () {
            return 0;
            }
        },
     }
    
    data() {
        return {
            counter: this.initialCounter
        }
    }
    
    
    1. prop 以一种原始的值传入且需要进行转换, 在这种情况下,最好使用这个 prop 的值来定义一个计算属性:
    props: ['size'],
    computed: {
        normalizedSize() {
            return this.size.trim().toLowerCase()
        }
    }
    

    • 在内存空间中的数据是如何存储的.

    代码内存空间主要是存储可执行代码的
    栈内存空间就是调用栈,是用来存储执行上下文的 -> 对象的指针存放在栈内存中
    堆内存空间是用来储存引用数据类型的 -> 指针指向的对象存放在堆内存中

    image.png

    相关文章

      网友评论

          本文标题:props 传值,父组件向子组件传递对象可以直接修改的问题

          本文链接:https://www.haomeiwen.com/subject/seonfjtx.html