javascript - Vue.js - 单向数据绑定(bind)从子级更新父级

Question

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

https://jsfiddle.net/ecgxykrt/

<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。它不会阻止您调用 prop 的方法或修改其元素或成员，其中任何一个都可以更改对象的内容。这些都不会改变 prop 本身的值，它是对底层结构的引用。

一个相关的问题是 Vue cannot detect changes to Array elements or additions/deletions of Object members .

更多 here .