站在月亮上Da? ...
詳述組件通信
? ??????????父傳子 -?
????????????????在組件標(biāo)簽上通過自定義屬性的形式:list="item"綁定數(shù)據(jù),然后在子組件中通過props接收props:["list"]
示例:
//組件標(biāo)簽????-????父組件
????????<custom-select :list="item"></custom-select>
//子組件? ? -????接收
????????props: [ 'list' ],
子傳父? -??
????????在子組件中通過this.$emit('自定義事件名稱', '要傳遞的數(shù)據(jù)'),完成子組件配置
????????在子組件的組件標(biāo)簽上通過@自定義事件名稱="事件處理函數(shù)",來完成父組件接收的任務(wù)
//子組件????-? ??
????????????發(fā)射this.$emit('receive', val)
????????????第一個參數(shù):“自定義事件名稱”;第二個參數(shù):你要傳遞的數(shù)據(jù)
//父組件????-????接收??
? ??????<list @receive="changeVal"></list>
兄弟
????????????可以借助于父組件作為中轉(zhuǎn)完成通信 子 > 父 > 子? ?( 不過特別麻煩 )
中央通信
????????在要傳遞數(shù)據(jù)的組件通過$emit(自定義事件名稱,要傳遞的數(shù)據(jù))
// select - listi
mportbusfrom'../../main'
selectVal (val) {? ? ??
? ??bus.$emit('reveive', val)??
? }???????
在目標(biāo)組件通過$on進行監(jiān)聽接收$on('自定義事件名稱', 回調(diào)函數(shù))
// select - input
importbusfrom'../../main'
bus.$on('reveive', val => {
????????console.log(val)this.value = val?
})???
PS:$emit & $on都要掛載到Vue空實例上,而這個空實例要全局使用因此需要在main.js創(chuàng)建
// main.js
let? bus =newVue()
export default? bus?
keep-alive組件的作用
? ? ? ? ? ? ? ? 他是Vue內(nèi)置的一個組件 , 可以使被包含的組件保留狀態(tài),或避免重新渲染
? ? ? ? ? ? ? ? ( 也就是說 包裹動態(tài)組件,緩存不活動組件實列,但不銷毀它們 )
單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點
?單頁面用戶體驗好,內(nèi)容改變不用重新加載整個頁面,前后端分離,并且頁面特效比較炫酷,但是不利于seo,初次加載比較費時,頁面復(fù)雜度提高很多
多頁面? ?利于seo? 開發(fā)成本較低但是頁面重復(fù)代碼多,維護成本相對復(fù)雜,刷新方式 整頁刷新
什么是計算屬性?什么情況使用?
?vue 的 計算屬性??computed
官方文檔對計算屬性的描述是:
模板內(nèi)的表達式非常便利,但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。所以,對于任何復(fù)雜邏輯,你都應(yīng)當(dāng)使用計算屬性。
你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue 知道?vm.reversedMessage?依賴于?vm.message,因此當(dāng)?vm.message?發(fā)生改變時,所有依賴?vm.reversedMessage?的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系:計算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的,這使它更易于測試和理解。
computed、methods的區(qū)別
? ??????????????他們得到最終結(jié)果是完全相同的,不同的是 computed 它 依賴于進行緩存,至于相關(guān)依賴發(fā)生關(guān)系才會改變他們重新求值,而methods則出發(fā)重新渲染,調(diào)用方法會再次執(zhí)行函數(shù)