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

資訊專欄INFORMATION COLUMN

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

立即前往

首頁/文章專欄/vue中組件之間傳遞數(shù)據(jù)的方法

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

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

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

作用域
在vue中，組件實例的作用域是孤立的，父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。這意味著不能 (也不應該) 在子組件的模板內直接引用父組件的數(shù)據(jù)。下面幾種方法可以實現(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，則在模板中需要轉化為用斷線隔開的形式：my-Message
    data:function(){
        return {

        }
    },
    methods:{
        
    }
});

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

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

通過自定義事件

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

1）在子組件中使用$emit(eventName,[...args])觸發(fā)事件，傳遞數(shù)據(jù)
2）在父組件中$on(eventName,callback)監(jiān)聽事件，接受數(shù)據(jù)作為回調函數(shù)的參數(shù)，并執(zhí)行回調函數(shù)。
其實這種方法和angular中控制器之間傳遞數(shù)據(jù)的有點類似的。注意觸發(fā)和監(jiān)聽事件的事件類型必須要保持一致，才可接受導數(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ā)當前實例上的事件。多個參數(shù)可以數(shù)組的形式傳遞
    }
}
});

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

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

使用slot分發(fā)內容

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


    
        這是頭部
        這是多余的內容，
        這是尾部
    


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

渲染結構如下：

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

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

轉載請注明本文地址：http://systransis.cn/yun/84347.html

vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數(shù)據(jù)驅動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
Vue 單文件中的數(shù)據(jù)傳遞

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

darry 2019-08-20 15:16 評論0 收藏0
vue組件之間通信實錄

摘要：一般在的開發(fā)中都是模塊化開發(fā)，所以當涉及到兄弟組件之間的通信的時候，我們可以在入口文件中事先聲明一個全局的事件巴士即一個全局的供實例，然后通過他來傳導數(shù)據(jù)。 1、在vue中父組件是通過props傳遞數(shù)據(jù)給子組件子組件只接受在子組件中定義過的props的值， Vue.component(child-component, { props: [prop1, prop2], // 定義...

李昌杰 2019-08-20 16:46 評論0 收藏0
vuejs組件通信精髓歸納

摘要：組件的通信和和內置的通信手段一般有兩種給元素或組件注冊引用信息訪問父子實例。有時候兩個組件之間需要進行通信，但是它們彼此不是父子組件的關系。詳情可參考參考組件之間種組件通信方式總結參考參考組件的分類常規(guī)頁面組件，由 vue-router 產生的每個頁面，它本質上也是一個組件（.vue），主要承載當前頁面的 HTML 結構，會包含數(shù)據(jù)獲取、數(shù)據(jù)整理、數(shù)據(jù)可視化等常規(guī)業(yè)務。功能性抽...

妤鋒シ 2019-08-23 15:23 評論0 收藏0
vue學習筆記4

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

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