父組件 -> 子組件 傳遞數據
父組件 -> 子組件傳遞數據，可以通過屬性的形式
<div id="root">
<counter :count="0"></counter> //:counter 獲取到的是數字，counter 獲取到的是字符串
<counter :count="1"></counter>
</div>
let counter = {
props:['count'], //子組件 接收 父組件傳遞過來的內容
template: '<div>{{count}}</div>', //模版中就可以使用這個數據了
}
let vm = new Vue({
el: '#root',
components:{
counter
}
})組件中:counter=“1”獲取到的是數字，counter=“1”獲取到的是字符串，因爲加了冒號後，後面值就是js表達式了，它就不是字符串了。它是一個js表達式，當然就是數字類型了。
父組件通過屬性的形式，向counter這個子組件傳遞了一個名字叫做counter的數據，子組件需要接收一下才能使用這個數據。
在 Vue 當中，父組件 -> 子組件 傳值，都是通過屬性的形式傳遞的。
子組件 修改 傳遞數據
<div id="root">
<counter :count="0"></counter>
<counter :count="1"></counter>
</div>
let counter = {
props:['count'],
template: '<div @click="handleClick">{{count}}</div>',
methods: {
handleClick(){
this.count ++
}
}
}
let vm = new Vue({
el: '#root',
components:{
counter
},
})直接操作父組件傳遞過來的值，用是可以用的，但是打開控制檯後，會發現 Vue 有個警告：你不要直接修改父組件傳遞過來數據，如下圖：
這是爲什麼呢？
在 Vue 當中有個單向數據流的概念，也就是父組件可以向子組件通過屬性的形式傳遞參數，你傳遞的參數可以隨便修改，也就是說父組件可以隨意的向子組件隨意的傳遞參數，但是子組件絕對不能反過來去修改父組件傳遞過來的參數。
之所有 Vue 之中有單項數據流的概念，原因在於，一旦你的子組件接受的數據不是基礎類型時，例如對象，也就是引用類型的數據時，你在子組件裏面改變了傳遞過來的數據，有可能這個數據還被其他子組件使用，這樣你這個子組件改了這個數據，不僅僅影響你你這個組件，還可能對其他的子組件造成影響。
所以 Vue 裏面說，我有一個單向數據流，你子組件不能改變父組件傳遞給你的數據，那該怎麼辦呢？
看下面代碼
<div id="root">
<counter :count="0"></counter>
<counter :count="1"></counter>
</div>
let counter = {
props:['count'],
data(){
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods: {
handleClick(){
this.number ++
}
}
}
let vm = new Vue({
el: '#root',
components:{
counter
},
})在子組件中用data接收下父組件傳遞過來的參數，用number來保存，頁面中顯示也用number，點擊子組件時只需修改number就可以了。
子組件 -> 父組件 傳遞數據
<div id="root">
<counter :count="2" @inc="handleIncrease"></counter>
<counter :count="3" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
let counter = {
props:['count'],
data(){
return {
number: this.count
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods:{
handleClick(){
this.number = this.number + 2
this.$emit('inc', 2)
}
}
}
let vm = new Vue({
el: '#root',
components: {
counter
},
data: {
total:5
},
methods: {
handleIncrease(step) {
this.total += 2
}
}
})當我點擊組件時，handleClick會被觸發，number會被改變，number改變時，用this.$emit觸發inc事件，counter組件中監聽inc事件，執行函數handleIncrease，在函數中對total操作。
父組件通過屬性的形式向子組件傳值，子組件通過事件觸發的形式向父組件傳值，而且父子組件傳值的時候還有一個隱性的規定，也就是單向數據流。父組件可以向子組件傳遞任何的數據，但是子組件不能修改父組件傳遞過來的數據，如果你一定要修改，就需要拷貝一個副本出來，你去用這個副本，修改這個副本就可以了。