美文网首页
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

相关文章

  • 复习Vue 组件间通信.md

    1. props/$emit 父组件向子组件传值:父组件通过props向下传递数据给子组件 子组件向父组件传值(通...

  • 2018-09-05

    组件传值问题 父组件给子组件传值应该使用props。子组件要给父组件传值,需要调用父组件传递的方法。props传值...

  • 19.ReactNative组件间的通信

    父组件向子组件通信: 父组件向子组件传值 通过props传递 在父组件中name='我是父组件向子组件传递的参数'...

  • ReactNative组件间的通信

    父组件向子组件通信 父组件向子组件传值 通过props传递 在父组件中name='我是父组件向子组件传递的参数' ...

  • React父子组件传值 + 值验证

    父组件向子组件传值 通过props,将父组件的state传递给了子组件。 子组件向父组件传值 父组件将更新数据的方...

  • Vue3——组件传值 & v-model & 异步组件 & te

    一、父子组件传值 父组件通过props向子组件传值,子组件通过emit触发自定义事件传递新值给父组件。props:...

  • vue 组件传参

    父组件向子组件传参 父组件可以使用props向子组件传递数据 logoMsg:"logoMsg" props: [...

  • vue父子组件之间传值

    父组件向子组件传值是通过属性(props)的形式进行传递子组件向父组件传值是通过事件($emit)的形式进行传递....

  • vue父子组件传值-故事讲解

    讲故事前先讲代码父组件向子组件传值父组件数据传递给子组件可以通过props属性来实现 父组件: 子组件: 父向子传...

  • Vue<实现父子组件间的相互传递>

    前提: 父组件向子组件传值,可以通过 props ;若我们通过子组件去修改父组件的值,当然也可以通过 $emit(...

网友评论

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

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