javascript - Vue.js - One-way data binding updating parent from child -
given colon indicates one-way-data-binding in vuejs2, understand why in example, child able update array declared in parent , passed child via prop (one-way).
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: [] } } }) thanks in advance!
if wanted to, avoid creating shallow copy , assigning new data item in child.
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: [] } } })
Comments
Post a Comment