vue 1.x 組件數據傳遞

cnsworder 發布于2019-08-01 17:29 / 776人閱讀

摘要：本文章主要講了組件如何進行數據的傳遞，從簡單的組件里面的數據如何顯示，子組件里面的數據顯示，子組件獲取父組件的數據，子組件主動發送數據給父組件。

本文章主要講了組件如何進行數據的傳遞，從簡單的組件里面的數據如何顯示，子組件里面的數據顯示，子組件獲取父組件的數據，子組件主動發送數據給父組件。

1.獲取父組件數據 疑問：多層事件可以通過冒泡獲得，vue 里面的多層數據是不是也可以直接獲取呢？ 驗證方法： 1.先在組件里面定義data 的數據，模版以及子組件 2.在子組件里面直接使用父組件里面的data數據

        components:{ //父級組件
            "aaa":{
                template:"我是aa組件
",
                data(){
                    return {
                        msg:"我是父組件的數據"
                    }
                },
                components:{
                    "bbb":{//子級組件
                        template:"我是bbb-->{{msg}}"
                    }
                }
            }

結果:不能 實踐結果是子級組件是不能直接獲取父級的組件的數據

2.通過 props 從父級傳遞數據到子級 步驟： 1.子組件綁定父組件的數據

2.子組件里面傳遞別稱的數據

代碼例子

3.子組件傳遞數據的類型聲明

可以在props 聲明傳遞的數據的類型，如

                        props:{
                            "mmm":String,
                            "num":Number
                        },

實際代碼例子

3.父組件獲取子組件數據——> $emit() 實現步驟: 1.子組件發送數據 vm.$emit("方法名"，"數據"); 2.父組件接收數據 v-on: @ 實現相關方法

代碼：

代碼例子

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

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

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

vue 1.x 組件數據傳遞

摘要：本文章主要講了組件如何進行數據的傳遞，從簡單的組件里面的數據如何顯示，子組件里面的數據顯示，子組件獲取父組件的數據，子組件主動發送數據給父組件。本文章主要講了組件如何進行數據的傳遞，從簡單的組件里面的數據如何顯示，子組件里面的數據顯示，子組件獲取父組件的數據，子組件主動發送數據給父組件。 1.獲取父組件數據疑問：多層事件可以通過冒泡獲得，vue 里面的多層數據是不是也可以直接獲取呢...

darkerXi 2019-08-20 19:01 評論0 收藏0
vue 1.x 組件數據傳遞

摘要：本文章主要講了組件如何進行數據的傳遞，從簡單的組件里面的數據如何顯示，子組件里面的數據顯示，子組件獲取父組件的數據，子組件主動發送數據給父組件。本文章主要講了組件如何進行數據的傳遞，從簡單的組件里面的數據如何顯示，子組件里面的數據顯示，子組件獲取父組件的數據，子組件主動發送數據給父組件。 1.獲取父組件數據疑問：多層事件可以通過冒泡獲得，vue 里面的多層數據是不是也可以直接獲取呢...

Aldous 2019-08-29 13:16 評論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0
Vue-組件詳解

摘要：除了監聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用。將和合并成，會自動去判斷是普通標簽還是組件。子組件這里的狀態綁定的是父組件的數據。查看原文站點，更多擴展內容及更佳閱讀體驗！組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-com...

dadong 2019-08-26 12:00 評論0 收藏0
初學Vue（四）-- 同級組件之間的數據交互

摘要：組件之間的數據交互方式父子級數據同步方法與同音我是父級，我的數據是在這里加入方法改變我是子級數據部分今天天氣不錯父級數據改變數據版本利用了原生的對象特性引用當父級數據是對象形式的時候在作用域中傳遞的就不再是以值的形式傳遞，而是組件之間的數據交互方式父子級數據同步： 1.x方法： .sync - 與think同音我是父級，我的數據是=>{{msg1}} ...

tinyq 2019-08-26 10:36 評論0 收藏0