父组件传给子组件数组的时候,发现在没有使用.sync的情况下,子组件修改此数组会同步到父组件。 不论是普通数组还是对象数组,子组件内对传递下来的数组的增删改操作都会同步到父组件的数组。 issues基本都是英文的,搜索后也不好确定有没有相关问题,因此这里反馈下。
以下代码可复制到 https://jsfiddle.net/yyx990803/okv0rgrk/ 测试
html
<div id="app">
{{ message }}//{{strs | json}}
<child :strs="strs"></child>
<child2 :strs="strs"></child2>
</div>
javascript
var c = Vue.extend({
template: '<div><h1>{{msg}}</h1></div>' +
'<div v-for="str of strs">' +
'<input v-model="str"/>' +
'<button @click="del(str)">del</button>' +
'</div>',
props: ['strs'],
data: function () {
return {
msg: 'child'
}
},
methods: {
del: function (item) {
this.strs.$remove(item);
}
}
});
var c2 = Vue.extend({
template: '<div><h1>{{msg}}</h1></div>' +
'<div v-for="str of strs"><input v-model="str"/></div>',
props: ['strs'],
data: function () {
return {
msg: 'child2'
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
str: 'string',
strs: ['a','s','d','f'],
objs: [
{name: 'a'},{name: 'b'},{name: 'c'},{name: 'd'}
]
},
components: {
child: c, child2: c2
}
})