組件通信相關(guān)
組件通信中的props
props驗(yàn)證：
props: {
// 基礎(chǔ)的類型檢查
PropA: Number
// 多種類型
PropB: [Number,Object]
// 帶默認(rèn)值的對(duì)象
對(duì)象 {
type: 類別
default() {
return 默認(rèn)值
}
required: true/false 是否必須
}
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
// return + 條件語(yǔ)句
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
組件通信中的ref
- 基本用法獲取dom元素
- 獲取子組件里面的數(shù)據(jù)
- 獲取子組件里的方法
父?jìng)髯?/h3>
子組件通過(guò)props 傳遞出一個(gè)對(duì)象，父組件通過(guò) ":子組件對(duì)象名=要傳的數(shù)據(jù)"
子傳父
子組件通過(guò)"$emit("事件名",要傳遞的對(duì)象) "自定義一個(gè)帶參數(shù)事件并發(fā)射出去
父組件通過(guò)使用 "@方法名=父組件方法" 父組件在對(duì)方法和參數(shù)進(jìn)行處理
事件修飾符相關(guān)
事件修飾符
-
.native
給組件綁定事件時(shí)必須加上 .native
相當(dāng)于子組件內(nèi)部處理click 事件然后再向外發(fā)送事件
-
.stop
- 阻止事件的冒泡（點(diǎn)擊子組件不會(huì)觸發(fā)父組件的事件）
.prevent
修飾符的使用 阻止 某些標(biāo)簽擁有自身的默認(rèn)事件奶稠，如a[href="#"]帚屉，button[type="submit"]
這些默認(rèn)事件不會(huì)因?yàn)?stop 阻止事件傳遞后停止
-
.once
- 使其只觸發(fā)一次
-
.self
- 只會(huì)觸發(fā)自己范圍內(nèi)的事件，不包含子元素
-
.capture
- 與冒泡事件訪問(wèn)相反從外到內(nèi)
-
.passive
主要用于移動(dòng)端監(jiān)聽(tīng)滾動(dòng) 滾動(dòng)時(shí)立即觸發(fā)
<div @scroll.passive="onScroll">...</div>不能和 .prevent一起使用 因?yàn)?.prevent 會(huì)被忽略
