父子組件的數據傳遞（計數器功能）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>父子組件的數據傳遞</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<counter :count="2" @inc="handleIncrease"></counter>
<counter :count="5" @inc="handleIncrease"></counter>
<div >{{total}}</div>
<counter @click.native="handleClick">給組件綁定原生事件，父組件寫方法</counter>
</div>
<script>
var counter ={
props:['count'],
data:function(){
return{
number:this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number++;
this.$emit('inc',1)
}
}
}
var vm = new Vue({
el:'#root',
data:{
total:7
},
components:{
counter:counter
},
methods:{
handleIncrease:function(step){
this.total+=step
}
}
})
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章