vue規(guī)則：組件不能修改props拿外部數(shù)據(jù)
this.$emit可以觸發(fā)事件，并傳參
$event可以獲取$emit參數(shù)
渲染了app是一個(gè)組件template長(zhǎng)這個(gè)樣子
image.png
刷新運(yùn)行
template的class叫app ，
App.vue說(shuō)我有多少錢(qián){{total}}下面有個(gè)子組件
image.png
子組件是從
Child.vue怎么使用呢？一定要聲明下
components:{Child: child}看child怎么接受的
export default {
props:["money"]//意思是接受一個(gè)外部數(shù)據(jù)名字叫money
};
于是把money傳給child
<Child : money="total"/>//我把data里的total告訴你
Child的結(jié)構(gòu)
<div class ="child">
{{money}}
<button @click = "$emit('update:money',money-100)">
<span>花錢(qián)</span>
</button>
錢(qián)是外部數(shù)據(jù) 修改不了
image.png
怎么申請(qǐng)呢
子組件當(dāng)前實(shí)例this.$emit,可以修改為$emit
夫組件監(jiān)聽(tīng)事件：v-on:我要花錢(qián)="total = $event " ; $event不是依附于this上，而是單獨(dú)一個(gè)變量
想獲取$emit后面的參數(shù)，就用$event
過(guò)程
爸爸給兒子一個(gè)money，兒子可以看到這個(gè){{money}}。想花錢(qián)的時(shí)候不能直接，于是觸發(fā)一個(gè)事件@click ="$emit('useMoney', money -100)".
爸爸發(fā)現(xiàn)他兒子有這個(gè)事件，久會(huì)把他兒子傳過(guò)來(lái)的參數(shù)加到錢(qián)上通過(guò)$event
<Child : money="total" v-on:useMoney="total = $event"/>
最后根據(jù)vue規(guī)則useMoney改成update:money
在App.vue的模板里
<Child ：money.sync = "total"/>
有人在child上綁定了v-on和emit，這就是事件的發(fā)布訂閱
image.png
