下面代碼是一個計數器的代碼，父元件把初始值傳給了子元件，子元件接收後，+1時，又把加的步長傳給了父元件，在父元件中顯示的總和。
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<counter :count="0" @change='handleIncrease'></counter>
<counter :count="1" @change='handleIncrease'></counter>
<div>{{total}}</div>
</div>
<script>
//父元件通過屬性的形式向子元件傳遞資料
var counter = {
props:['count'],
data: function(){
return {
number: this.count
}
},
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick: function(){
//this.count++
//單項資料流概念：子元件不要随意修改父元件傳遞的參數，隻用就可以了，如果是引用類型，會影響外部元件
//如果一定要修改，修改副本
this.number++;
//通過事件觸發的方式子元件向父元件傳值
this.$emit('change',1); //發生改變，步長為1
}
}
}
var vm = new Vue({
el:"#root",
data:{
total:1
},
methods:{
handleIncrease: function(step){
this.total+=step;
}
},
components:{
counter:counter
}
})
</script>
</body>
</html> 1.父元件是通過屬性的方式向子元件傳值
在子元件中定義props，count就是要接收值的屬性。
props:['count'], 在父元件中給它指派：兩個标簽，一個指派為0，一個指派為1，count前面的:怎麼用，這裡是數字，加不加:都可以，如果是字元串不能加:,加上:意味着找父元件的這個變量。:count="name"，為找父元件定義的name變量的值，指派給count，count="name"，把name字元串指派給count。
<counter :count="0" @change='handleIncrease'></counter>
<counter :count="1" @change='handleIncrease'></counter> 子元件擷取值後，我們把它指派給子元件中定義的一個變量number。然後點選時number+1，把步長傳回給父元件
this.$emit('change',1); //發生改變，步長為1 <counter :count="0" @change='handleIncrease'></counter>
<counter :count="1" @change='handleIncrease'></counter> ![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)