vue子组件数据变了为什么父组件没有变？
<!DOCTYPE html><html><head>
<title></title>
<style type="text/css">
</style>
<script src="vue.js"></script>
<script type="text/javascript">
window.onload=function(){ var user={ template:'#my_div', props:['message'], methods:{
add(){ this.message++; this.$emit('increment1');
}
}
} new Vue({ el:'#app', data:{ test:10
}, components:{ 'user':user
}, methods:{ incrementTotal: function () {
alert(this.test);
}
}
})
} </script></head><body><template id="my_div">
<div>
<h3>{{message}}</h3>
<button @click=add()>增加</button>
</div></template><div id="app">
<user :message="test" v-on:increment1="incrementTotal"></user></div></body></html>
MYYA浏览 1676回答 1
1回答
-
慕码人2483693
写的例子有问题，不要直接操作父组件传过来的message，看看文档可以在子组件这样设置prop:['message'],data(){ msg:this.message//初始化,避免直接操作prop}, methods:{ add(){ this.msg++; this.$emit('add',this.msg); } }在父组件监听add，然后更新父组件的test值。
随时随地看视频慕课网APP
相关分类
Vue.js