Javascript Vue.js-从子级更新父级的单向数据绑定

鉴于冒号表示VueJS2中的单向数据绑定，我想了解为什么在本例中，子级能够更新父级中声明并通过prop one-way传递给子级的数组

---

提前谢谢

请避免使用某些名称作为键和值

：datatest=datatest错误方式

：数据测试=数据测试更好地使用Kabab案例

HTML

结果:

父值：[]

---

Vue阻止您指定道具。它不会阻止您调用道具的方法或修改其元素或成员，任何这些都可以更改对象的内容。所有这些都不会改变道具本身的价值，道具本身是对底层结构的引用

一个相关的问题是：

---

更多信息。

如果您愿意，可以通过创建浅层副本并将其分配给子级中的新数据项来避免这种情况

---

这是如何解释为什么子项能够更新父项数据的呢？这些警告也是完全不同的，因为长度本身没有直接修改，并且项目已经预先设置好了。根据这一点，还应正确跟踪推送。子级获取对数组的引用，因此能够修改其内容。这与导致警告的情况完全相同。它与修改长度无关，也与项目是提前创建的事实无关。核心问题是对象是一个引用。因此，由于我更改了子对象的属性，父对象被更新，这种行为打破了单向绑定，对吗？我需要做什么来避免这种情况？创建对象或数组的每个道具的深度副本？如果要修改本地数据项，请创建深度副本。然后处理数据项。正确的处理取决于你想要完成什么。我不会说把每一个道具都做一个深度复制；在很多情况下，您不需要修改内容。但是，您正在使用datatest而不是datatest。如果你检查你的控制台，这将导致一个错误，你当然会保留空数组。这个答案应该只是OP中的一个注释。我对这个答案很感兴趣，因为这些答案没有任何解释。vue明确声明这是单向绑定，在直接修改道具时甚至应该得到警告。@Stephan-v对象和数组是通过引用传递的。可以修改它们，就像修改常量值一样。您不能将道具更改为全新的对象或数组。如果我要创建对象的浅拷贝而不是数组，是否需要使用外部库来创建深拷贝？如果我使用Lodash克隆vuejs的可观察对象，即使在克隆中，引用也将相同，因此这不会解决我的问题=。在这种情况下，我需要做什么？可以使用Object.assign。childData=Object.assign{}，parentProp；

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <span>Parent value: {{ dataTest }}</span>
    <test :datatest="dataTest" />
</div>

var test = {
    props: ['datatest'],
    mounted: function() {
        this.datatest.push(10)
    },
    render: function() {}
}

new Vue({
    el: '#app',
    components: {
        'test': test
    },
    data: function() {
        return {
            dataTest: []
        }
    }
})

<div id="app">
  <span>Parent value: {{ dataTest }}</span>
  <test :data-test="dataTest" />
</div>

var test = {
  props: {
        dataTest:{
        type:Number
      }
  },
  mounted: function() {
    this.datatest.push(10)
  },
  render: function() {}
}

new Vue({
  el: '#app',
  components: {
    'test': test
  },
  data: function() {
    return {
      dataTest: []
    }
  }
})

var test = {
  props: ['test'],
  data: function() {
  return {
    myTest: this.test.slice()
  }
  },
  mounted: function() {
    this.myTest.push(10)
  },
  render: function() {}
}

new Vue({
  el: '#app',
  components: {
    'test': test
  },
  data: function() {
    return {
      dataTest: []
    }
  }
})