Vue 單文件中的數據傳遞

darry 發布于2019-08-20 15:16 / 626人閱讀

摘要：兩個同級組件之間傳遞數據，通過傳遞數據。準備工作，我新建了個文件，分別是實例根組件，包含和組件的父組件，的同級組件父組件向子組件傳遞數據，通過傳遞數據。

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

父組件向子組件傳遞數據，通過 props 傳遞數據。

子組件向父組件傳遞數據，通過 events 傳遞數據。

兩個同級組件之間傳遞數據，通過 event bus 傳遞數據。

??文檔中也已經詳細的說明了各種情況下的解決方法，但是現在我在還沒有閱讀多少文檔的情況下，沒有找到有單文件組件方面的具體書寫方式，智商和理解能力有限的情況下，自己嘗試了一下，最后發現其實是一樣的。所以這篇文章其實是廢話，但是還是想記錄一下，不枉自己花了一個多小時。

準備工作，我新建了 6 個文件，分別是：

index.html

main.js 「Vue 實例」

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

page.vue 「msg 的父組件，footer 的同級組件」

msg.vue

footer.vue

父組件向子組件傳遞數據，通過 props 傳遞數據。

這里我以 page 向 msg 傳遞數據為例：
page.vue 中

msg.vue 中

??這樣以后就會發現，實現了把父組件 page 中的數據傳遞到子組件 msg 中了。
??另外，需要強調一下的是，不要在子組件中修改 props 的值，當然修改是有效的，非常不推薦，而且 Vue 也會有警告提示。正確的做法是傳遞給 data 中的屬性或者計算屬性。props 中的值是可以通過 this.love 訪問到的。
??特別注意 props 值是引用類型時的情況，不可以進行簡單的賦值，會影響到父組件，正確的做法是進行深拷貝。

子組件向父組件傳遞數據，通過 events 傳遞數據。

父組件 page.vue 中

子組件 msg.vue 中

點擊后就會發現 console 出了 "success"。

同級元素之間傳遞數據，通過 event bus 來傳遞。

需要引入一個 Vue 實例作為中央總線。
page 組件中

footer 組件中

嗯，最后發現打印出來了 "666"，這樣就實現了。

最后總結一下：

父組件向子組件傳遞數據，通過 props 傳遞數據。具體做法只需要在父組件中綁定，在子組件中聲明。

//父組件

    


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

子組件向父組件傳遞數據，通過 events 傳遞數據。具體做法時在父組件中監聽，在子組件中觸發。


    


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

兩個同級組件之間傳遞數據，通過 event bus 傳遞數據。

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

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

//監聽事件
export default {
    ...
   mounted: {
        this.$on("communicate", (data) => {
            //...
        })
   }
}

嗯，廢話較多，毫無干貨。作為剛進入前端行業，剛開始寫博客的新人，缺點和不足麻煩大家指出。轉載請注明出處。

云服務器 GPU云服務器 js 文件之間傳遞數據 asp單文件數據庫 js文件中的數據 python文件傳遞

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82119.html

vue學習筆記4

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。父組件向子組件傳值組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數據 // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

jhhfft 2019-08-02 11:56 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

frontoldman 2019-08-29 17:11 評論0 收藏0
vue學習筆記3

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。Vue.js - Day3 定義Vue組件什么是組件：組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調用對應的組件即可；組件化和模塊化的不同：模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0