這篇文章主要介紹了Vue中的生命周期和數(shù)據(jù)共享是什么的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue中的生命周期和數(shù)據(jù)共享是什么文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務器托管報價，主機托管價格性價比高，為金融證券行業(yè)南充服務器托管，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

一、組件的生命周期

1.1 生命周期 & 生命周期函數(shù)

1?? 生命周期（Life Cycle）是指一個組件從創(chuàng)建 → 運行 → 銷毀的整個階段，強調(diào)的是一個時間段。

2?? 生命周期函數(shù)：是由 vue 框架提供的內(nèi)置函數(shù)，會伴隨著組件的生命周期，自動按次序執(zhí)行。

?溫馨提醒?：生命周期強調(diào)的是時間段，生命周期函數(shù)強調(diào)的是時間點。

1.2 組件生命周期函數(shù)的分類

1.3 生命周期圖示

可以參考 vue 官方文檔給出的“生命周期圖示”，進一步理解組件生命周期執(zhí)行的過程：

#生命周期圖示

二、組件之間的數(shù)據(jù)共享

2.1 組件之間的關(guān)系

在項目開發(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 的使用步驟?：

1. 創(chuàng)建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象；

2. 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit(‘事件名稱’, 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件；

3. 在數(shù)據(jù)接收方，調(diào)用 bus.$on(‘事件名稱’, 事件處理函數(shù)) 方法注冊一個自定義事件；

三、ref 引用

3.1 什么是 ref 引用

1?? ref 用來輔助開發(fā)者在不依賴于jQuery 的情況下，獲取 DOM 元素或組件的引用。

2?? 每個 vue 的組件實例上，都包含一個$refs 對象，里面存儲著對應的DOM 元素或組件的引用。默認情況下，組件的 $refs 指向一個空對象。

代碼演示如下：

3.2 使用 ref 引用 DOM 元素

如果想要使用 ref 引用頁面上的 DOM 元素，則可以按照如下的方式進行操作：

代碼演示如下：

3.3 使用 ref 引用組件實例

如果想要使用 ref 引用頁面上的組件實例，則可以按照如下的方式進行操作：

3.4 控制文本框和按鈕的按需切換

通過布爾值 inputVisible 來控制組件中的文本框與按鈕的按需切換。示例代碼如下：

3.5 讓文本框自動獲得焦點

當文本框展示出來之后，如果希望它立即獲得焦點，則可以為其添加 ref 引用，并調(diào)用原生 DOM 對象的.focus() 方法即可。示例代碼如下：

3.6 this.$nextTick(cb) 方法

組件的 $nextTick(cb) 方法，會把 cb 回調(diào)推遲到下一個 DOM 更新周期之后執(zhí)行。通俗的理解是：等組件的DOM 更新完成之后，再執(zhí)行 cb 回調(diào)函數(shù)。從而能保證 cb 回調(diào)函數(shù)可以操作到最新的 DOM 元素。

關(guān)于“Vue中的生命周期和數(shù)據(jù)共享是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue中的生命周期和數(shù)據(jù)共享是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。