<!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>
1 回答
慕码人2483693
TA贡献1860条经验 获得超9个赞
写的例子有问题，不要直接操作父组件传过来的message，看看文档
可以在子组件这样设置
prop:['message'],data(){
msg:this.message//初始化,避免直接操作prop},
methods:{
add(){ this.msg++; this.$emit('add',this.msg);
}
}在父组件监听add，然后更新父组件的test值。
添加回答
举报
0/150
提交
取消