Question

鉴于冒号表示VueJS2中的单向数据绑定，我想理解为什么在这个例子中，子节点能够更新父节点中声明的数组并通过prop传递给子节点（单程）。

<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: []
        }
    }
})

提前致谢！

Answer 1

Vue阻止你分配道具。它不会阻止您调用prop的方法或修改其元素或成员，其中任何一个都可以更改对象的内容。这些都不会改变道具本身的价值，这是对基础结构的引用。

相关问题是Vue cannot detect changes to Array elements or additions/deletions of Object members。

更多here。

Answer 2

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

https://jsfiddle.net/6xxba1fz/

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: []
    }
  }
})

Answer 3

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

：datatest =“dataTest”错误的方式

：data-test =“dataTest”Better Way（使用Kabab案例）

<强> HTML

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

<强> JS

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: []
    }
  }
})

<强> 结果：

父母价值：[]

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

3 个答案: