vue2.0子组件修改父组件数据

2017-01-11 15:24:05来源:segmentfault作者:夏君人点击

从vue1.0升级至2.0之后prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据
那么在vue2.0之后 如何在子组件修改父组件props传过来的值呢?
思路是通过子组件$emit发射一个方法


$emit('increment',val);

在父组件使用子组件的地方用v-on绑定这个自定义事件


<button-counter v-on:increment="incrementTotal"></button-counter>

然后在父组件定义这个方法


methods:{
incrementTotal(val) {
this.val = val;
}
}

虽然这种方式可以修改父组件数据,但是官方是不推荐在组件内修改通过props传入的父组件数据,而是推荐使用vuex

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台