【问题标题】:vue.js prop array/object vs literalvue.js 道具数组/对象与文字
【发布时间】:2018-01-28 11:46:20
【问题描述】:

vue.js 中的道具是一种方式绑定,顺便说一下,在文档中:

https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

“请注意,JavaScript 中的对象和数组是通过引用传递的,因此如果 prop 是数组或对象,则在子级内部改变对象或数组本身会影响父级状态。”

所以我想知道,prop.sync 是仅用于“litteral”(即字符串、数字、日期)还是我也必须将它与对象/数组一起使用?

我已经使用了没有同步的对象并且一切都很好,但我担心这不是做“vue.js”方式的好解决方案?

所以我的问题是:我可以在道具中使用对象/数组,不同步,没有问题吗?

【问题讨论】:

    标签: binding vue.js


    【解决方案1】:

    在某些情况下,我们可能需要对道具进行“双向绑定”。不幸的是,真正的双向绑定会产生维护问题,因为子组件可以使父组件发生变异,而该变异的来源在父组件和子组件中都不明显。 这就是为什么我们建议以 update:myPropName 的模式发出事件。例如,在带有 title 属性的假设组件中,我们可以通过以下方式传达分配新值的意图:

    this.$emit('update:title', newTitle)
    

    如果你直接在子组件中改变一个道具,你会得到错误。所以从这个意义上说,不,这不安全。原因是父级将覆盖子级设置的任何内容。

    【讨论】:

      【解决方案2】:

      是的,您可以使用对象和数组作为道具值。然而,一个区别是,当为对象或数组类型的 props 提供默认值时,您必须定义一个工厂函数来返回默认值。

      主要区别在于 sync 修饰符是扩展为 v-on 侦听器的语法糖。当值发生变化时,子组件会向父组件发送事件,从而允许父组件进行相应的更新。

      子组件必须显式地发出事件。

      // example from docs
      this.$emit('update:foo', newValue)
      

      【讨论】:

      • 我的问题更多的是关于“使用对象进行双向绑定是否安全?根本不同步?”
      • 如果你直接在子组件中改变一个道具,你会得到错误。所以从这个意义上说,不,这不安全。原因是父级将覆盖子级设置的任何内容。同步修饰符可以解决这个问题。
      猜你喜欢
      • 2023-04-08
      • 2017-04-09
      • 2023-04-05
      • 2016-03-20
      • 2020-01-28
      • 2017-04-30
      • 2020-12-02
      • 2019-05-31
      • 2019-03-25
      相关资源
      最近更新 更多