成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

初學(xué)Vue（四）-- 同級(jí)組件之間的數(shù)據(jù)交互

tinyq / 1637人閱讀

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

組件之間的數(shù)據(jù)交互方式 父子級(jí)數(shù)據(jù)同步：

1.x方法：

.sync - 與think同音

    

        
我是父級(jí)，我的數(shù)據(jù)是=>{{msg1}}

        
        
    


    

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

2.x版本：

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

html部分：


    
我是父級(jí)，我的數(shù)據(jù)是=>{{msg1.a}}

    
    





js部分：
new Vue({
    el:"#app",
    data:{
        msg:"今天天氣不錯(cuò)",
        msg1:{
            a:"父級(jí)數(shù)據(jù)",
        },
    },
    components: {
        "my":{
            methods:{
                cg:function(){
                    this.mymsg.a="改變數(shù)據(jù)";
                }
            },
            props: ["mymsg"],
            template:"#bill",
        }
    }
})
組件之間的數(shù)據(jù)交互方式

首先需要在script中創(chuàng)建一個(gè)公共的實(shí)例化Vue對(duì)象

var v = new Vue();

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

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

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

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

完整代碼：

html部分：



    
    
    







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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106447.html

相關(guān)文章

  • vue組件初學(xué)習(xí)（一）---初學(xué)者文檔

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

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

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

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

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

  • vue組件學(xué)習(xí)-數(shù)據(jù)傳遞-路由（初學(xué)者文檔二）

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

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

  • vue組件間通信、數(shù)據(jù)傳遞（父子組件，同級(jí)組件）

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

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<