国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

vue中組件之間傳遞數(shù)據(jù)的方法

singerye 發(fā)布于2019-08-20 18:19 / 3151人閱讀

摘要：在父組件中，需要引用子組件的地方，傳入數(shù)據(jù)。其實(shí)這種方法和中控制器之間傳遞數(shù)據(jù)的有點(diǎn)類似的。

作用域
在vue中，組件實(shí)例的作用域是孤立的，父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。下面幾種方法可以實(shí)現(xiàn)組件之間數(shù)據(jù)的傳遞。

通過prop傳遞數(shù)據(jù)

1）在子組件中，使用prop屬性，顯示的表明，它所需要的數(shù)據(jù)。
2）在父組件中，需要引用子組件的地方，傳入數(shù)據(jù)。
具體看下面的代碼：


//傳入數(shù)據(jù)，注意引號里面的為父組件的數(shù)據(jù)，

     
Vue.component("my-item",{
    template:"這是組件,{{value}}",
    props:["value"],//聲明需要的數(shù)據(jù)，HTML 特性是不區(qū)分大小寫的,所以此處如果為駝峰命名法，如：myMessage，則在模板中需要轉(zhuǎn)化為用斷線隔開的形式：my-Message
    data:function(){
        return {

        }
    },
    methods:{
        
    }
});

//創(chuàng)建vue實(shí)例
const vm=new Vue({
    el:"#app",
    data:{
        value:"這是父組件的數(shù)據(jù)",
    },
    methods:{
    
    },
});

這種方法適合父組件向子組件傳遞數(shù)據(jù)，可以記為：你先告訴我要什么，然后我給你什么。
注意：這種方式是單向數(shù)據(jù)流，當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會反過來。當(dāng)你想改變prop中數(shù)據(jù)時(shí)，可采用如下方法：定義一個局部變量，并用 prop 的值初始化它，或者使用計(jì)算屬性。

通過自定義事件

自定義事件可以實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)，具體方法如下：

1）在子組件中使用$emit(eventName,[...args])觸發(fā)事件，傳遞數(shù)據(jù)
2）在父組件中$on(eventName,callback)監(jiān)聽事件，接受數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)，并執(zhí)行回調(diào)函數(shù)。
其實(shí)這種方法和angular中控制器之間傳遞數(shù)據(jù)的有點(diǎn)類似的。注意觸發(fā)和監(jiān)聽事件的事件類型必須要保持一致，才可接受導(dǎo)數(shù)據(jù)。具體看下面的例子：


{{number}}





Vue.component("my-item",{
template:"",
data:function(){
    return {
        count : 0,
    }
},
methods:{
    add:function(){
        this.count+=1;
        this.$emit("cli",this.count);//觸發(fā)當(dāng)前實(shí)例上的事件。多個參數(shù)可以數(shù)組的形式傳遞
    }
}
});

//創(chuàng)建vue實(shí)例
const vm=new Vue({
el:"#app",
data:{
    number:""
},
methods:{
    totlcli:function(num){//這個回調(diào)在父組件監(jiān)聽到事件時(shí)，執(zhí)行的，其參數(shù)為觸發(fā)事件時(shí)傳遞的。
        return this.number=num;
    },
},
});

這樣就可以把子組件中的數(shù)據(jù)通過自定義事件的方式傳到了父組件。

使用slot分發(fā)內(nèi)容

主要應(yīng)用場景是，混合父組件的內(nèi)容與子組件自己的模板時(shí)用到。具體使用步驟：
1）在子組件中，使用slot標(biāo)簽作為組件模板之中的內(nèi)容分發(fā)插槽。  元素自身將被替換。
2）在父組件中，使用slot屬性，用于標(biāo)記往哪個slot中插入子組件內(nèi)容。
當(dāng)name相同時(shí)，響應(yīng)的內(nèi)容就會被插入到子組件中去
具體看下面的例子：


    
        這是頭部
        這是多余的內(nèi)容，
        這是尾部
    


Vue.component("my-item",{
        template:""+
                ""+
                "備用插槽，當(dāng)沒有備用內(nèi)容會顯示出來"+
                ""+
                "",
        props:{
        },
        data:function(){
            return {            
            }
        }
    });
    const vm=new Vue({
        el:"#app",
        data:{
        },
        methods:{    
        },
    });

渲染結(jié)構(gòu)如下：

注意：匿名（沒用name屬性）的slot元素，作為找不到匹配的內(nèi)容片段的備用插槽，即在父組件中沒有使用slot屬性的內(nèi)容會在這個備用插槽顯示。如果沒有默認(rèn)的 slot，這些找不到匹配的內(nèi)容片段將被拋棄。