<div id="app">
<counter :count="111"></counter>
<counter :count="222"></counter>
</div>
<script>
var counter = {
props: ['count'],
template: '<div @click="handleClick">{
{count}}</div>',
methods: {
handleClick() {
// 应该避免这样直接操作父组件传递来的值
this.count ++
}
}
}
var vm = new Vue({
el: '#app',
data: {
},
components: {
counter
}
});
</script>
虽然功能上没有什么问题,但是会报错
应该尽可能避免在子组件中修改父组件传递过来的数据,因为如果父组件传递过来的是引用类型的数据,子组件修改了的话,会对其他所有依赖这个数据的组件产生影响,这就是vue中的单向数据流
解决办法:子组件自己拷贝一份父组件传递过来的值拿来用
效果: