欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?生命周期和數(shù)據(jù)共享詳解

 更新時(shí)間:2022年02月22日 15:13:14   作者:pingting_  
這篇文章主要為大家詳細(xì)介紹了Vue生命周期和數(shù)據(jù)共享,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

1. 組件的生命周期

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

生命周期是指一個(gè)組件從 創(chuàng)建 => 運(yùn)行 => 銷毀 的整個(gè)時(shí)間段,強(qiáng)調(diào)的是一個(gè)時(shí)間段生命周期函數(shù)是由 vue 框架提供的內(nèi)置函數(shù),會(huì)伴隨著組件的生命周期,自動(dòng)按次序執(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 中的方法,請(qǐng)求服務(wù)器中的數(shù)據(jù)。
    • 并且把請(qǐng)求到的數(shù)據(jù)轉(zhuǎn)存在 data 中,提供 template 模板渲染的時(shí)候使用。
    • 但是模板結(jié)構(gòu)尚未生成,不能訪問(wèn) 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)成功的渲染到了瀏覽器
    • 此時(shí)瀏覽器中已經(jīng)包含了當(dāng)前組件的 DOM 結(jié)構(gòu)
    • 這也是最早可以操作 DOM 的時(shí)候

組件運(yùn)行階段

  • beforeUpdata 
    • 將要根據(jù)變化過(guò)最新的數(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)
    • 當(dāng)數(shù)據(jù)變化之后,操作最新的 DOM 結(jié)構(gòu)

組件銷毀階段

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

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

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

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

在項(xiàng)目的開(kāi)發(fā)中,組件之間的最常見(jiàn)的關(guān)系分為如下兩種:

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

2.2 父向子傳值

使用自定義屬性

  • 簡(jiǎn)單類型復(fù)制,復(fù)雜類型是傳的引用。
  • 不要修改 props 的值
  • 父組件通過(guò) v-bind 綁定數(shù)值
<Son :msg="message" :user="userinfo"></Son>
export default {
    data() {
        return {
            message: 'hello son',
            userinfo: {
                name: 'pingting',
                age: 18
            }
        }
    }
}

子組件通過(guò) props 聲明自定義屬性

<div>
    <h3>Son 組件</h3>
    <p>父組件傳過(guò)來(lái)的 msg: {{ msg}} </p>
    <p>父組件傳過(guò)來(lái)的 user:{{ user}} </p>
</div>
export default {
    props: ['msg' , 'user']
}

2.3 子向父?jìng)髦?/h3>

使用自定義事件

子組件通過(guò) $emit 將值傳遞給父組件

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

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

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

父組件

@ 綁定自定義事件

<Right @numChange="getNewCount"></Right>
export default {
    data() {
        return {
            // 接收 right 傳過(guò)來(lái)的 count
            countFather: 0
        }
    },
    methods: {
      getNewCount(val){
        this.countFather = val
      }
    }
}

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

在 vue2.x 使用 eventBus

在這里插入圖片描述

創(chuàng)建 eventBus.js 模塊,并向外共享一個(gè) Vue 的實(shí)例對(duì)象

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(){
            // 通過(guò) eventBus 發(fā)送數(shù)據(jù)
            bus.$emit('share' , this.str)
        }
    }
}

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

<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é)

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

相關(guān)文章

  • 深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)

    深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)

    在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下
    2023-11-11
  • vue?require.context()的用法實(shí)例詳解

    vue?require.context()的用法實(shí)例詳解

    require.context是webpack提供的一個(gè)api,通常用于批量注冊(cè)組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-04-04
  • vue如何實(shí)時(shí)往數(shù)組里追加數(shù)據(jù)

    vue如何實(shí)時(shí)往數(shù)組里追加數(shù)據(jù)

    這篇文章主要介紹了vue如何實(shí)時(shí)往數(shù)組里追加數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue3中reactive響應(yīng)式失效的解決方案

    Vue3中reactive響應(yīng)式失效的解決方案

    這篇文章主要給大家分享Vue3中reactive響應(yīng)式失效的問(wèn)題的解決方法,文中有詳細(xì)的解決方案供大家參考,如果又遇到一樣問(wèn)題的同學(xué),可以借鑒閱讀本文
    2023-08-08
  • Vue和React有哪些區(qū)別

    Vue和React有哪些區(qū)別

    這篇文章主要介紹了Vue和React有哪些區(qū)別,幫助大家更好的理解和學(xué)習(xí)JavaScript框架,感興趣的朋友可以了解下
    2020-09-09
  • Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法

    Vue.js Ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法

    Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù),同時(shí)擁有非常容易上手的API。下面通過(guò)本文給大家介紹vue.js ajax動(dòng)態(tài)參數(shù)與列表顯示實(shí)現(xiàn)方法,感興趣的朋友一起看看吧
    2016-10-10
  • vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式

    vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式

    這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據(jù)和文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue查找指令和模板思路詳解

    vue查找指令和模板思路詳解

    這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本,隨著思路的展開(kāi)我們就來(lái)實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下
    2023-10-10
  • vue中使用el-dropdown方式

    vue中使用el-dropdown方式

    這篇文章主要介紹了vue中使用el-dropdown方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue組件中的自定義事件你了解多少

    Vue組件中的自定義事件你了解多少

    這篇文章主要為大家詳細(xì)介紹了Vue組件中的自定義事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-02-02

最新評(píng)論