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

資訊專欄INFORMATION COLUMN

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

立即前往

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

vue中組件之間傳遞數據的方法

singerye 發布于2019-08-20 18:19 / 3157人閱讀

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

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

通過prop傳遞數據

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


//傳入數據，注意引號里面的為父組件的數據，

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

        }
    },
    methods:{
        
    }
});

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

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

通過自定義事件

自定義事件可以實現子組件向父組件傳遞數據，具體方法如下：

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


{{number}}





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

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

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

使用slot分發內容

主要應用場景是，混合父組件的內容與子組件自己的模板時用到。具體使用步驟：
1）在子組件中，使用slot標簽作為組件模板之中的內容分發插槽。  元素自身將被替換。
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，這些找不到匹配的內容片段將被拋棄。

GPU云服務器云服務器 js之間傳遞數據 php 之間傳遞數據 js 文件之間傳遞數據 java中數據的傳遞

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

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

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

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

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

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

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

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

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

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

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

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

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