Are there specific consequences of modifying a parent array from a child component?
It is possible to change the properties of the parents from the child component when they props
are an array:
Vue.component('search-box', {
template: '#search-box-template',
props: ['who']
})
var vm = new Vue({
el: '#root',
data: {
who: ['a', 'b']
}
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
who as seen by the parent: {{who}}
<search-box v-bind:who="who"></search-box>
</div>
<template id="search-box-template">
<div>
who as seen by the child: {{who}}
<button v-on:click="who.push('x')">modify who from within the child</button>
</div>
</template>
Apart from the intended action to change parent from child (which could be a bad thing to do in style) - are there side effects of this, ones that violate Vue.js?
source to share
You will not "break Vue" by breaking encapsulation and what updates the component's data items from outside the component. docs say
it is also important to keep parent and child as untethered as possible through a well-defined interface. This ensures that each component code can be written and reasoned with respect to isolation, making them more usable and potentially more reusable.
This is the rationale: it's good programming, not a matter of what Vue can't handle.
source to share