3.1 組件的生命周期

1、概念

（1）生命周期：是指一個組件從創建、運行、銷毀的整個階段，強調的是一個時間段

（2）生命周期函數：是由vue框架提供的內置函數，會伴隨組件的生命周期，自動按次序執行

2、生命周期函數示意圖：Vue 實例 — Vue.js

3、生命周期函數

（1）組件創建階段

• beforeCreate()

  組件的props/data/methods尚未被創建，都處于不可用狀態

• created()

  組件的props/data/methods已創建好，都處于可用狀態，但是組件的模板結構尚未生成

• beforeMount()

  將要把內存中編譯好的HTML結構渲染到瀏覽器中，此時瀏覽器中還沒有當前組件的DOM結構

• mounted()

  已經把內存中HTML結構，成功的渲染到了瀏覽器中，此時瀏覽器中已然包含了當前組件的DOM結構

（2）組件運行階段

• beforeUpdate()

  將要根據變化過后最新的數據，重新渲染組件的模板結構

• updated()

  已經根據最新的數據，完成了組件DOM結構的重新渲染

（3）組件銷毀階段

• beforeDestroy()

  將要銷毀此組件，此時尚未銷毀，組件還處于正常工作狀態

• destroyed()

  組件已經被銷毀，此組件在瀏覽器中對應的DOM結構已被完全移除

3.2 組件之間的數據共享

1、組件之間的關系

在項目開發中常見的是：父子關系、兄弟關系

2、父子關系

（1）父向子傳值：使用自定義屬性（props）

注意：自定義屬性定義在子組件中，不要修改props的值

（2）子向父傳值：使用自定義事件

步驟：

• 父組件接收emit回來的值

• 父組件在methods中定義這個函數將其接收到父組件中

• 子組件調用$emit()。修改數據時，通過$emit()觸發自定義事件

<!--子組件--> export default {data() {return {count: 0,};}, ?methods: {add() {this.count += 1;this.$emit("changeNumber", this.count);},}, }; <!--父組件--> <Son @changeNumber="getNumber"></Son> export default {data() {return {countfromSon: 0,};},methods: {getNumber(val) {this.countfromSon = val;},},components: {Son,}, };

3、兄弟關系

（1）在vue2.x。兄弟組件之間的數據共享方案是EventBus

（2）EventBus使用步驟：

• 創建EventBus.js模塊，并向外共享一個Vue的實例對象

• 在數據發送方，調用bus.$emit('事件名稱',要發送的數據)方法觸發自定義事件，在methods中

• 在數據接收方，調用bus.$on('事件名稱',事件處理函數)方法注冊一個自定義事件,一般在created()中

（3）例子

<!-- 數據發送方 --> <script> // 導入EventBus.js import bus from "@/components/EventBus.js"; ? export default {data() {return {str: "會挽雕弓如滿月，西北望，射天狼。",};},methods: {send() {// ? 利用EventBus發送數據bus.$emit("share", this.str);},}, }; </script> <!-- 數據接收方 --> <script> // 導入EventBus.js import bus from "@/components/EventBus.js"; ? export default {data() {return {msgFromBro: "",};},created() {bus.$on("share", (val) => {this.msgFromBro = val;});}, }; </script> <!-- EventBus.js --> import Vue from 'vue' export default new Vue()

3.3 ref引用

1、概念

（1）ref用來輔助開發者在不依賴于jQuery的情況下，獲取DOM元素或組件的引用

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

2、使用ref引用DOM元素

• 使用$refs：this.$refs.ref名稱

• ref名稱不能重復

<h1 ref="myh1">App 根組件----{{ countfromSon }}</h1> <button @click="showThis">打印this</button> ? methods: {showThis() {this.$refs.myh11.style.color = "red";// console.log(this.$refs.myh11);}, },

3、使用ref引用組件實例

<!--使用ref屬性為對應的組件添加引用名稱--> <Ref ref="comRef"></Ref> <button @click="onReset">重置</button> ? <script> import Ref from "@/components/Ref.vue"; ? export default {methods: {onReset() {//調用子組件函數// this.$refs.comRef.reset();//調用子組件data值this.$refs.comRef.count = 0;},},components: {Ref,}, }; </script>

4、this.$nextTick(callback)

組件的this.$nextTick(callback)方法，會把callback回調推遲到下一個DOM更新周期之后執行

3.4 引申-數組方法

1、some循環

（1）forEach循環只要開始，在中間無法終止

（2）從數組中找元素用some，在找到對應項之后，用return true終止循環

（3）語法

arr.some((item, index) => {//循環語句，return true是為了終止循環return true })

2、every循環

（1）判斷數組中每一項是否被全選，全是true結果是true，有一個是false，結果就是false

（2）語法

arr.every(item => item.state)

3、reduce方法

• reduce就是累加器

• 使用方法：reduce((累加的結果,當前循環項)=>{},初始值)，reduce里面是箭頭函數和初始值，每次循環之后第二個值都會相加

//當state為true時算總價 const arr = [{ id: 1, name: '西瓜', state: false, price: 10, count: 1 },{ id: 2, name: '蘋果', state: true, price: 20, count: 2 },{ id: 3, name: '榴蓮', state: true, price: 50, count: 3 } ] //方法1 let amt = 0 arr.filter(item => item.state).forEach(item => {amt += item.price * item.count }) console.log(amt); ? //方法2 const res = arr.filter(item => item.state).reduce((amt, item) => {return amt += item.price * item.count }, 0) console.log(res);

總結

以上是生活随笔為你收集整理的vue2.0生命周期数据共享的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。