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

時間 2019-11-09

標籤 vue 組件之間傳遞數據方法简体版

原文原文鏈接

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

經過prop傳遞數據vue

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

<div id="app">
<my-item :value="value">//傳入數據，注意引號裏面的爲父組件的數據，
</my-item>
</div>     
Vue.component("my-item",{
    template:"<div>這是組件,{{value}}</div>",
    props:["value"],//聲明須要的數據，HTML 特性是不區分大小寫的,因此此處若是爲駝峯命名法，如：myMessage，則在模板中須要轉化爲用斷線隔開的形式：my-Message
    data:function(){
        return {

        }
    },
    methods:{
        
    }
});

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

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

經過自定義事件app

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

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

<div id="app">
{{number}}
<!-- 在用到子組件的地方監聽，監聽當前實例上的自定義事件 ,接受參數，並執行回調-->
<my-item v-on:cli="totlcli">
</my-item>
</div>

Vue.component("my-item",{
template:"<button v-on:click='add'>{{count}}</button>",
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;
    },
},
});

這樣就能夠把子組件中的數據經過自定義事件的方式傳到了父組件。this

使用slot分發內容spa

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

<div id="app">
    <my-item>
        <p slot="header">這是頭部</p>
        <p>這是多餘的內容，</p>
        <p slot="footer">這是尾部</p>
    </my-item>
</div>

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

渲染結構以下：code