<!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貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
寫(xiě)的例子有問(wèn)題，不要直接操作父組件傳過(guò)來(lái)的message，看看文檔
可以在子組件這樣設(shè)置
prop:['message'],data(){
msg:this.message//初始化,避免直接操作prop},
methods:{
add(){ this.msg++; this.$emit('add',this.msg);
}
}在父組件監(jiān)聽(tīng)add，然后更新父組件的test值。
添加回答
舉報(bào)
0/150
提交
取消