您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue中的生命周期和數(shù)據(jù)共享是什么的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇Vue中的生命周期和數(shù)據(jù)共享是什么文章都會(huì)有所收獲,下面我們一起來看看吧。
1.1 生命周期 & 生命周期函數(shù)
1?? 生命周期(Life Cycle)是指一個(gè)組件從創(chuàng)建 → 運(yùn)行 → 銷毀的整個(gè)階段,強(qiáng)調(diào)的是一個(gè)時(shí)間段。
2?? 生命周期函數(shù):是由 vue 框架提供的內(nèi)置函數(shù),會(huì)伴隨著組件的生命周期,自動(dòng)按次序執(zhí)行。
?溫馨提醒?:生命周期強(qiáng)調(diào)的是時(shí)間段,生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)。
1.2 組件生命周期函數(shù)的分類
1.3 生命周期圖示
可以參考 vue 官方文檔給出的“生命周期圖示”,進(jìn)一步理解組件生命周期執(zhí)行的過程:
#生命周期圖示
2.1 組件之間的關(guān)系
在項(xiàng)目開發(fā)中,組件之間的最常見的關(guān)系分為如下兩種:
父子關(guān)系
兄弟關(guān)系
2.2 父子組件之間的數(shù)據(jù)共享
父子組件之間的數(shù)據(jù)共享又分為:
父 → 子共享數(shù)據(jù)
子 → 父共享數(shù)據(jù)
2.2.1 父組件向子組件共享數(shù)據(jù)
父組件向子組件共享數(shù)據(jù)需要使用自定義屬性。示例代碼如下:
2.2.2 子組件向父組件共享數(shù)據(jù)
子組件向父組件共享數(shù)據(jù)使用自定義事件。示例代碼如下:
2.3 兄弟組件之間的數(shù)據(jù)共享
在 vue2.x 中,兄弟組件之間數(shù)據(jù)共享的方案是EventBus。
?EventBus 的使用步驟?:
創(chuàng)建 eventBus.js
模塊,并向外共享一個(gè) Vue 的實(shí)例對(duì)象;
在數(shù)據(jù)發(fā)送方,調(diào)用 bus.$emit
(‘事件名稱’, 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件;
在數(shù)據(jù)接收方,調(diào)用 bus.$on
(‘事件名稱’, 事件處理函數(shù)) 方法注冊(cè)一個(gè)自定義事件;
3.1 什么是 ref 引用
1?? ref 用來輔助開發(fā)者在不依賴于jQuery 的情況下,獲取 DOM 元素或組件的引用。
2?? 每個(gè) vue 的組件實(shí)例上,都包含一個(gè)$refs 對(duì)象,里面存儲(chǔ)著對(duì)應(yīng)的DOM 元素或組件的引用。默認(rèn)情況下,組件的 $refs 指向一個(gè)空對(duì)象。
代碼演示如下:
3.2 使用 ref 引用 DOM 元素
如果想要使用 ref 引用頁面上的 DOM 元素,則可以按照如下的方式進(jìn)行操作:
代碼演示如下:
3.3 使用 ref 引用組件實(shí)例
如果想要使用 ref
引用頁面上的組件實(shí)例,則可以按照如下的方式進(jìn)行操作:
3.4 控制文本框和按鈕的按需切換
通過布爾值 inputVisible
來控制組件中的文本框與按鈕的按需切換。示例代碼如下:
3.5 讓文本框自動(dòng)獲得焦點(diǎn)
當(dāng)文本框展示出來之后,如果希望它立即獲得焦點(diǎn),則可以為其添加 ref 引用,并調(diào)用原生 DOM 對(duì)象的.focus()
方法即可。示例代碼如下:
3.6 this.$nextTick(cb) 方法
組件的 $nextTick(cb)
方法,會(huì)把 cb 回調(diào)推遲到下一個(gè) DOM 更新周期之后執(zhí)行。通俗的理解是:等組件的DOM 更新完成之后,再執(zhí)行 cb 回調(diào)函數(shù)。從而能保證 cb 回調(diào)函數(shù)可以操作到最新的 DOM 元素。
關(guān)于“Vue中的生命周期和數(shù)據(jù)共享是什么”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“Vue中的生命周期和數(shù)據(jù)共享是什么”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。