初學Vue（四）-- 同級組件之間的數據交互

tinyq 發布于2019-08-26 10:36 / 1632人閱讀

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

組件之間的數據交互方式 父子級數據同步：

1.x方法：

.sync - 與think同音

    
        我是父級，我的數據是=>{{msg1}}
        
        
    

    

js 部分：
    new Vue({
        el:"#app",
        data:{
            msg:"今天天氣不錯",
            msg1:"父級數據",
        },
        components: {
            "my":{
                methods:{
                    cg:function(){
                        this.mymsg="改變數據";
                    }
                },
                props: ["mymsg"],
                template:"#bill",
            }
        }
    })

2.x版本：

利用了原生js的對象特性 -- 引用
當父級數據是對象形式的時候在作用域中傳遞的就不再是以值的形式傳遞，
而是用引用傳遞對象的形式傳遞，類似于C語言的指針/別名，所以，用這種形式的時候當改變子級數據時父級數據也會改變
this.mymsg.a="改變數據"

html部分：

    我是父級，我的數據是=>{{msg1.a}}
    
    




js部分：
new Vue({
    el:"#app",
    data:{
        msg:"今天天氣不錯",
        msg1:{
            a:"父級數據",
        },
    },
    components: {
        "my":{
            methods:{
                cg:function(){
                    this.mymsg.a="改變數據";
                }
            },
            props: ["mymsg"],
            template:"#bill",
        }
    }
})

組件之間的數據交互方式

首先需要在script中創建一個公共的實例化Vue對象

var v = new Vue();

第二，在傳出的地方用v.$emit()，第一個參數為key，第二個參數為value，key在接收時會用到

vm.$emit("a-msg","這里是a組件的數據");

最后，在接收的地方用$v.on()接收，第一個參數是傳出時的key，第二個參數是一個方法，有形參data，形參是傳過來的數據

v.$on("a-msg",(data)=>{console.log(data);});

完整代碼：

html部分：


    
    
    






-------------------------------------------------------------------------------
js部分：
var vm = new Vue();

new Vue({
    el:"#app",
    data:{

    },
    components:{
        "my-aaa":{
            methods: {
                change(){
                    //調用了外部的公共對象,傳入數據
                    vm.$emit("a-msg",this.aMsg);
                }
            },
            data(){
                return {
                    aMsg:"我是a的數據",
                }
            },
            template:"#aaa"
        },
        "my-bbb":{
            methods: {
                change(){
                    //調用了外部的公共對象,傳入數據
                    vm.$emit("b-msg",this.bMsg);
                }
            },
            data(){
                return {
                    bMsg:"我是b的數據",
                }
            },
            template:"#bbb"
        },
        "my-ccc":{
            template:"#ccc",
            data(){
                return {
                    a:"暫無a的數據",
                    b:"暫無b的數據"
                }
            },
            mounted () {
                //與 $emit()對應的是 $on()
                vm.$on("a-msg",(data)=>{
                    console.log(data);
                    this.a = data;
                });
                vm.$on("b-msg",(data)=>{
                    console.log(data);
                    this.b = data;
                });
            }
        }
    }
})

云服務器 GPU云服務器組件之間通信 vue組件 vue組件開發 vue父子組件通訊

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

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

vue組件初學習（一）---初學者文檔

摘要：在有時候，組建也可以是原生的元素。簡單的說，就是組件是有結構的有樣式的，有交互效果，有行為，信號量可以存數據。組件可以通過屬性開設置。一、什么是組件？組件是vue.js最強大的功能之一，它可以擴展HTML元素，封裝可以重用的代碼. 當然，在更高的層面上，組件是自定義元素，vue.js的編譯器為它添加了特殊功能。在有時候，組建也可以是原生的HTML元素。簡單的說，就是組件是有結構...

HmyBmny 2019-08-21 17:37 評論0 收藏0
Vue 單文件中的數據傳遞

摘要：兩個同級組件之間傳遞數據，通過傳遞數據。準備工作，我新建了個文件，分別是實例根組件，包含和組件的父組件，的同級組件父組件向子組件傳遞數據，通過傳遞數據。 ??Vue 的單文件組件在使用 Vue 時非常常用，所以我們也會經常遇到組件之間需要傳遞數據的時候，大致分為三種情況：父組件向子組件傳遞數據，通過 props 傳遞數據。子組件向父組件傳遞數據，通過 events 傳遞數據。兩...

darry 2019-08-20 15:16 評論0 收藏0
vue組件學習-數據傳遞-路由（初學者文檔二）

摘要：接上次的驗證開始，組件中的作用域都是獨立的，子組件的模板不能直接引用父組件的數據，要用特殊方法才能實現數據的傳遞。，環境的安裝第一步新建一個文件夾并初始化第二步安裝一級路由這個比較簡單，大多應用于單頁面應用，不必引入整個路由庫。接上次的props驗證開始，組件中的作用域都是獨立的，子組件的模板不能直接引用父組件的數據，要用特殊方法才能實現數據的傳遞。一、父子組件之間的通信 ...

Cristic 2019-08-21 17:38 評論0 收藏0
vue組件間通信、數據傳遞（父子組件，同級組件）

總結一下對vue組件通信的理解和使用。一、組件目錄結構父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

Harpsichord1207 2019-08-21 17:28 評論0 收藏0