1. 組件的生命周期

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

生命周期是指一個組件從 創(chuàng)建 => 運行 => 銷毀 的整個時間段，強調(diào)的是一個時間段。生命周期函數(shù)是由 vue 框架提供的內(nèi)置函數(shù)，會伴隨著組件的生命周期，自動按次序執(zhí)行。

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

1.3 生命周期圖示以及詳解

組件創(chuàng)建階段

• beforeCreted props/data/methods … 都未被創(chuàng)建，啥也干不了
• created
  • props/data/methods … 都創(chuàng)建好了
  • 經(jīng)常在此函數(shù)里調(diào)用 methods 中的方法，請求服務(wù)器中的數(shù)據(jù)。
  • 并且把請求到的數(shù)據(jù)轉(zhuǎn)存在 data 中，提供 template 模板渲染的時候使用。
  • 但是模板結(jié)構(gòu)尚未生成，不能訪問 DOM 結(jié)構(gòu)，DOM 結(jié)構(gòu)均為 null
• beforeMount 將要把內(nèi)存中編譯好的 HTML 結(jié)構(gòu)渲染到瀏覽器中
• mounted
  • 已經(jīng)把內(nèi)存中的 HTML 結(jié)構(gòu)成功的渲染到了瀏覽器中
  • 此時瀏覽器中已經(jīng)包含了當前組件的 DOM 結(jié)構(gòu)
  • 這也是最早可以操作 DOM 的時候

組件運行階段

• beforeUpdata 
  • 將要根據(jù)變化過最新的數(shù)據(jù)重新渲染組件的模板結(jié)構(gòu)
  • data是最新的 ui結(jié)構(gòu)中的內(nèi)容還是舊的 
• updataed 
  • 已經(jīng)根據(jù)最新的數(shù)據(jù)完成了組件的 DOM 結(jié)構(gòu)的重新渲染
  • 最新的 data 最新的 ui結(jié)構(gòu)
  • 當數(shù)據(jù)變化之后，操作最新的 DOM 結(jié)構(gòu)

組件銷毀階段

beforeDestory 將要銷毀這個組件，此時尚未銷毀組件還處于正常工作的狀態(tài)

destoryed 組件已經(jīng)完全被銷毀，此時組件在瀏覽器中對應(yīng)的 DOM 結(jié)構(gòu)已經(jīng)完全移除

2. 組件之間的數(shù)據(jù)共享

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

在項目的開發(fā)中，組件之間的最常見的關(guān)系分為如下兩種：

• 父子關(guān)系
• 兄弟關(guān)系

2.2 父向子傳值

使用自定義屬性

• 簡單類型是復(fù)制，復(fù)雜類型是傳的引用。
• 不要修改 props 的值
• 父組件通過 v-bind 綁定數(shù)值

<Son :msg="message" :user="userinfo"></Son>

export default {
    data() {
        return {
            message: 'hello son',
            userinfo: {
                name: 'pingting',
                age: 18
            }
        }
    }
}

子組件通過 props 聲明自定義屬性

<div>
    <h3>Son 組件</h3>
    <p>父組件傳過來的 msg： {{ msg}} </p>
    <p>父組件傳過來的 user：{{ user}} </p>
</div>

export default {
    props: ['msg' , 'user']
}

2.3 子向父傳值

使用自定義事件

子組件通過 $emit 將值傳遞給父組件

當 click事件觸發(fā) => 調(diào)用 add 函數(shù) => 觸發(fā) numChange 事件 =>

this.count作為實參傳遞給 getNewCount 函數(shù) => 形參為 val

export default {
    data(){
        return {
            // 子組件的數(shù)據(jù)
            count: 0
        }
    },
    methods: {
        add(){
            this.count += 1
            // 觸發(fā)一個自定義事件并且傳遞參數(shù)
            this.$emit('numChange' , this.count)
        }
    }
}

父組件

@ 綁定自定義事件

<Right @numChange="getNewCount"></Right>

export default {
    data() {
        return {
            // 接收 right 傳過來的 count
            countFather: 0
        }
    },
    methods: {
      getNewCount(val){
        this.countFather = val
      }
    }
}

2.4 兄弟之間的數(shù)據(jù)關(guān)系

在 vue2.x 使用 eventBus

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

import Vue from 'vue'
export default new Vue()

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

<button @click="sendStr">發(fā)送數(shù)據(jù)給 Right </button>

import bus from './eventBus.js'
export default {
    data(){
        return {
            str: '這是Son的str數(shù)據(jù)，將要共享出去'
        }
    },
    methods: {
        sendStr(){
            // 通過 eventBus 發(fā)送數(shù)據(jù)
            bus.$emit('share' , this.str)
        }
    }
}

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

<p>從 Son 接受的數(shù)據(jù)：{{ strFromSon }} </p>

import bus from './eventBus.js'
export default {
    data(){
        return {
            strFromSon: ''
        }
    },
    created() {
        bus.$on('share' , (val) => {
            this.strFromSon = val
        })
    }
}

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!  

最新評論