上一節(jié)主要講了父組件如何向子組件傳值商佛，這一節(jié)課主要講子組件是如何向父組件傳值的。
我們首先介紹一下今天要使用的案例—實現(xiàn)一個加減的功能威彰，并且顯示相應(yīng)的數(shù)字，如同購物車加減數(shù)量的功能舔痕。
接下來我們首先要創(chuàng)建一個Counter.vue的組件
Html部分：
這里面的num是動態(tài)的豹缀，還需要注意一點，這個子組件在不同的父組件里時啸如，可能其起始值的需求可能是不一樣的氮惯，所以這個num需要從父組件里傳值過來，以達(dá)到這個組件的靈活性妇汗。
?
Js部分—按照常理，我們應(yīng)該是進(jìn)行下面的操作的寞焙，做點擊事件的處理嘍：
props: ['num'],
?data () {
??return {
??}
?},
?methods: {
???increment() {
?????this.$emit("incre")
???},
???decrement() {
?????this.$emit("decre")
?}
?}
很簡單啊互婿，這有什么難的啊慈参！是這樣的嗎？我們看下頁面顯示—功能是沒有問題的娘扩，看起來一切都先完美啊畜侦！可是可是，我們看下控制臺澎语，會嚇一大跳验懊，一片紅！What?出什么事了义图？
來解釋一下：
Num是父組件傳過來的數(shù)據(jù)，而你在子組件里竟然給修改覆蓋了娃承！真的是膽大包天噢怕篷！敢動老子的東西？這萬萬不行的廊谓。Vue也是遵守孝道的良民好吧！這事千萬使不得的春弥，要改也需要老子來改嘍叠荠！
大家可以換位思考一下啦，子組件被不同的父組件調(diào)用蝙叛，或者在相同的父組件里被調(diào)用多次公给，如果每個子組件都要改父組件的數(shù)據(jù)，那么就亂肺然，完全是失控狀態(tài)了腿准，所以一定要有規(guī)矩拾碌。
Vue的機(jī)制就是子組件里是不可以覆蓋父組件的數(shù)據(jù)的街望！
怎么辦呢？
只有在子組件里去通知父組件灾前，我的值要改變，然后在父組件里兼聽到這種需求后蔫敲，就立即執(zhí)行炭玫！
這就是兩步驟：
1.????在子組件里發(fā)送自定義事件
2.????在父組件里兼聽事件后執(zhí)行
子組件里的代碼：
Js部分：
props: ['num'],
?data () {
??return {
??}
?},
?methods: {
???increment() {
?????this.$emit("incre")
???},
???decrement() {
?????this.$emit("decre")
?}
?}
父組件里的代碼：
Js部分：
import Counter from './components/Counter.vue'
?export default {
???components: {
?????'v-counter': Counter
???},
???data() {
?????return {
????????num: 6
?????}
???},
???methods: {
?????increment() {
???????this.num++
?????},
?????decrement() {
???????this.num--
?????}
?}
?}
父組件向子組件傳值吞加，顯示其POWER，子組件向父組件傳值衔憨，顯示規(guī)矩
歡迎關(guān)注微信公眾號：duzhan99
