創(chuàng)建組件
在components文件夾下創(chuàng)建一個(gè)組件名為demo的組件
wx組件.PNG
在文件夾下面右鍵創(chuàng)建組件
wxx組件2.PNG
在組件中寫內(nèi)容
wxzujian.PNG
在所需要用的頁面上進(jìn)行配置
wxzujian2.PNG
此時(shí)在頁面中即可顯示組件的內(nèi)容
image.png
父子通信
子傳父
在組件中創(chuàng)建觸發(fā)事件來執(zhí)行子傳父this.triggerEvent('aa',{},{})
參數(shù)1：事件名 參數(shù)2：傳入的數(shù)據(jù)，參數(shù)3：配置
此方法相當(dāng)于vue中的this.$emit
image.png
image.png
此時(shí)我們點(diǎn)擊按鈕后就會(huì)將數(shù)據(jù)傳入到父組件中
父組件利用自定義事件進(jìn)行接收子組件傳來的數(shù)據(jù)
image.png
image.png
image.png
父?jìng)髯?/h3>
此時(shí)我們需要將父組件的數(shù)據(jù)傳入子組件中
父組件數(shù)據(jù)
image.png
定義屬性進(jìn)行傳入子組件
image.png
子組件進(jìn)行接收
可以設(shè)置默認(rèn)值和傳入的類型
image.png
子組件中的值就位父組件中傳入的值
image.png
