成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Vue 單文件中的數(shù)據(jù)傳遞

darry / 673人閱讀

摘要：兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)，通過(guò)傳遞數(shù)據(jù)。準(zhǔn)備工作，我新建了個(gè)文件，分別是實(shí)例根組件，包含和組件的父組件，的同級(jí)組件父組件向子組件傳遞數(shù)據(jù)，通過(guò)傳遞數(shù)據(jù)。

??Vue 的單文件組件在使用 Vue 時(shí)非常常用，所以我們也會(huì)經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時(shí)候，大致分為三種情況：

父組件向子組件傳遞數(shù)據(jù)，通過(guò) props 傳遞數(shù)據(jù)。

子組件向父組件傳遞數(shù)據(jù)，通過(guò) events 傳遞數(shù)據(jù)。

兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)，通過(guò) event bus 傳遞數(shù)據(jù)。

??文檔中也已經(jīng)詳細(xì)的說(shuō)明了各種情況下的解決方法，但是現(xiàn)在我在還沒(méi)有閱讀多少文檔的情況下，沒(méi)有找到有單文件組件方面的具體書(shū)寫(xiě)方式，智商和理解能力有限的情況下，自己嘗試了一下，最后發(fā)現(xiàn)其實(shí)是一樣的。所以這篇文章其實(shí)是廢話(huà)，但是還是想記錄一下，不枉自己花了一個(gè)多小時(shí)。

準(zhǔn)備工作，我新建了 6 個(gè)文件，分別是：

index.html

main.js 「Vue 實(shí)例」

app.vue 「根組件，包含 page 和 footer 組件」

page.vue 「msg 的父組件，footer 的 同級(jí)組件」

msg.vue

footer.vue

父組件向子組件傳遞數(shù)據(jù)，通過(guò) props 傳遞數(shù)據(jù)。

這里我以 page 向 msg 傳遞數(shù)據(jù)為例：
page.vue 中

msg.vue 中

??這樣以后就會(huì)發(fā)現(xiàn)，實(shí)現(xiàn)了把父組件 page 中的數(shù)據(jù)傳遞到子組件 msg 中了。
??另外，需要強(qiáng)調(diào)一下的是，不要在子組件中修改 props 的值，當(dāng)然修改是有效的，非常不推薦，而且 Vue 也會(huì)有警告提示。正確的做法是傳遞給 data 中的屬性或者計(jì)算屬性。props 中的值是可以通過(guò) this.love 訪(fǎng)問(wèn)到的。
??特別注意 props 值是引用類(lèi)型時(shí)的情況，不可以進(jìn)行簡(jiǎn)單的賦值，會(huì)影響到父組件，正確的做法是進(jìn)行深拷貝。

子組件向父組件傳遞數(shù)據(jù)，通過(guò) events 傳遞數(shù)據(jù)。

父組件 page.vue 中

子組件 msg.vue 中

點(diǎn)擊后就會(huì)發(fā)現(xiàn) console 出了 "success"。

同級(jí)元素之間傳遞數(shù)據(jù)，通過(guò) event bus 來(lái)傳遞。

需要引入一個(gè) Vue 實(shí)例 作為中央總線(xiàn)。
page 組件中

footer 組件中

嗯，最后發(fā)現(xiàn)打印出來(lái)了 "666"，這樣就實(shí)現(xiàn)了。

最后總結(jié)一下：

父組件向子組件傳遞數(shù)據(jù)，通過(guò) props 傳遞數(shù)據(jù)。具體做法只需要在父組件中綁定，在子組件中聲明。

//父組件

    


//子組件
export default {
    ...
    props: ["love"]
}

子組件向父組件傳遞數(shù)據(jù)，通過(guò) events 傳遞數(shù)據(jù)。具體做法時(shí)在父組件中監(jiān)聽(tīng)，在子組件中觸發(fā)。


    


//子組件
export default {
    ...
   methods: {
       pass () {
            this.$emit("passData", "hi")
       } 
   }
}

兩個(gè)同級(jí)組件之間傳遞數(shù)據(jù)，通過(guò) event bus 傳遞數(shù)據(jù)。

import { bus } from "./bus.js"http://兩個(gè)組件都要引入

//觸發(fā)事件
export default {
    ...
   methods: {
       passData () {
            this.$emit("communicate", "hello")
       } 
   }
}

//監(jiān)聽(tīng)事件
export default {
    ...
   mounted: {
        this.$on("communicate", (data) => {
            //...
        })
   }
}

嗯，廢話(huà)較多，毫無(wú)干貨。作為剛進(jìn)入前端行業(yè)，剛開(kāi)始寫(xiě)博客的新人，缺點(diǎn)和不足麻煩大家指出。轉(zhuǎn)載請(qǐng)注明出處。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/82119.html

相關(guān)文章

  • vue學(xué)習(xí)筆記4

    摘要：主要當(dāng)作屬性來(lái)使用方法表示一個(gè)具體的操作，主要書(shū)寫(xiě)業(yè)務(wù)邏輯一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。父組件向子組件傳值 組件實(shí)例定義方式，注意：一定要使用props屬性來(lái)定義父組件傳遞過(guò)來(lái)的數(shù)據(jù) // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

    番茄西紅柿 評(píng)論0 收藏0

  • 從頭開(kāi)始學(xué)習(xí)vue-router

    摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...

    tommego 評(píng)論0 收藏0

  • 從頭開(kāi)始學(xué)習(xí)vue-router

    摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...

    jhhfft 評(píng)論0 收藏0

  • 從頭開(kāi)始學(xué)習(xí)vue-router

    摘要：路由模塊的本質(zhì)就是建立起和頁(yè)面之間的映射關(guān)系。這時(shí)候我們可以直接利用傳值了使用來(lái)匹配路由，然后通過(guò)來(lái)傳遞參數(shù)跳轉(zhuǎn)對(duì)應(yīng)路由配置于是我們可以獲取參數(shù)六配置子路由二級(jí)路由實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。 一、前言 要學(xué)習(xí)vue-router就要先知道這里的路由是什么？為什么我們不能像原來(lái)一樣直接用標(biāo)簽編寫(xiě)鏈接哪？vue-router如何使用？常見(jiàn)路由操作有哪些？等等這些問(wèn)...

    frontoldman 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記3

    摘要：主要當(dāng)作屬性來(lái)使用方法表示一個(gè)具體的操作，主要書(shū)寫(xiě)業(yè)務(wù)邏輯一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。Vue.js - Day3 定義Vue組件 什么是組件： 組件的出現(xiàn)，就是為了拆分Vue實(shí)例的代碼量的，能夠讓我們以不同的組件，來(lái)劃分不同的功能模塊，將來(lái)我們需要什么樣的功能，就可以去調(diào)用對(duì)應(yīng)的組件即可； 組件化和模塊化的不同： 模塊化： 是從代碼邏輯的角度進(jìn)行劃分的；方便代碼分層開(kāi)...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<