1、父組件通過:count="3"的方式向子組件傳遞參數(shù)，且子組件不能隨意修改父組件傳遞過來的參數(shù)，但可以對參數(shù)的復(fù)本進行修改；
2、子組件通過$emit方法向父組件傳遞參數(shù)，并發(fā)布一個方法；
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<counter :count="3" @inc="handleIncrease"></counter>
<counter :count="2" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
// :count="0"，不加:傳的是一個字符串
// 單向數(shù)據(jù)流:父組件可以隨意的向子組件傳遞參數(shù)，但子組件不能隨意修改父組件傳遞過來的參數(shù),因為這個參數(shù)可能被多個子組件共用
var counter = {
props: ['count'],
// 子組件復(fù)制一份父組件數(shù)據(jù)的復(fù)本可以對其進行隨意修改
data: function() {
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick: function() {
this.number = this.number + 2
this.$emit('inc', 2)
}
}
}
var vm = new Vue({
el: '#app',
components: {
counter: counter
},
data: {
total: 5
},
methods: {
// step是this.$emit('inc', 2)傳遞的第二個參數(shù)
handleIncrease: function(step) {
this.total += step
}
}
})
</script>
</body>
</html>
