时间戳

首页 > 解决方案 > Vue.js 使用自定义类型的两种方式绑定

vue.js - Vue.js 使用自定义类型的两种方式绑定

问题描述

我认为 Vue.js 中父子组件之间的双向数据流不仅不鼓励而且是不可能的。但是我发现实际上可以使用自定义类作为道具。

自定义类：

    class MyClass {
      constructor(val) {
        this.val = val;
      }
    }

父模板：

 <div>
  <child :obj="obj"></child>
</div>

儿童道具：

props: {
  obj: MyClass
}

子模板：

<div>
  <button @click='obj.val="changed"'>Change val</button>
</div>

这是一个工作示例：https ://codepen.io/francoisgaudin/pen/XWdBOxN

所以现在我想知道为什么这是可能的 - 它是故意允许的还是不应该被利用的漏洞？

标签： vue.js

解决方案

我在 Vue.js 文档中找到了关于“单向数据流”（https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow）的答案。他们指定了以下警告：

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

因此，一种方式的数据流没有被严格执行，在这种情况下没有错误或警告。这是一个漏洞——（最好避免）。

推荐阅读