手機: 18919834768
電話熱線: 0931-7603702
網站知識
當前位置: 主頁 > 網站知識

vue3組件自定義事件

發布時間:2023-03-02 16:39:10???來自:未知???編輯:蘭州啟點網絡 www.ing-cap.com.cn

學習要點:
1.自定義事件
2.驗證拋出的事件
本節課我們來開始學習 Vue3.x 的組件中自定義事件的方法。
一.自定義事件
1. 系統內置的事件比如:click、change 等等,也可以自定義事件;
2. 而組件中的自定義事件,可以滿足之前無法實現的需求:更改父組件的值;
3. 由于這塊知識點比較繞,第一次學習可能會摸不招頭腦,所以,我按照步驟走一遍;
(1). 先創建兩個子組件 htmlA htmlB,都用 props 加載父組件的內容;
const htmlA = {...}
const htmlB = {...}
// 父組件綁定兩個子組件
components : {
'html-a' : htmlA,
'html-b' : htmlB
},
(2). 在其中一個子組件,比如 htmlA 中定義一個自定義事件,和 props 的定義方式一樣;
// 定義子組件的自定義事件
emits : ['child-event'],
(3). 通過子組件中使用 v-on 以自定義事件去執行父組件的一個方法;
<html-a v-on:child-event="parentFn" v-bind:parent-message="message">html-a>
(4). 在子組件模板中添加一個按鈕,點擊后來執行這個自定義事件,并拋出一個值;
// button 按鈕點擊后觸發一個方法,方法里執行自定義事件,并拋值
template : `
{{parentMessage}}
{{message}}
`,
//方法
methods : {
childClick(message) {
this.$emit('child-event', message)
}
}
(5). 最后一步了:執行父組件的一個方法,并獲取子組件傳遞的值,然后更改父組件內容;
//這里是父組件的方法
methods : {
parentFn(value) {
this.message = value
console.log('子組件觸發了我~')
}
}
PS:一套流程下來,我們終于可以修改父組件的內容了;內容較繞,需要多多理清;
二.驗證拋出的事件
1. 這個和 props 用法的一樣的,具體如下:
emits : {
// 不驗證
//'child-event' : null
// 復雜驗證
'child-event' : (value) => {
if (value !== 'abc') {
console.log('驗證失敗~')
return false
} else {
return true
}
}
},
PS:文檔上,這塊內容分了兩個部分,一個是基礎組件,另一個是深入組件都有講解;
本文由:蘭州啟點網絡(www.ing-cap.com.cn)整理發布!

? QQ咨詢

建站咨詢 售前咨詢 私人訂制 售后技術

? 電話咨詢

0931-7603702
(早9:00-晚10:00)

? 微信咨詢

掃碼關注
點點租

? 返回頂部
国产精品va无码二区_国产肥熟女视频一区二区三区_欧美亚洲另类在线一区_日韩亚洲中文字幕