將值從組件傳遞到父實例

我有一個名爲cartComponent的組件，其數據屬性爲cartCount，每次將新項目添加到購物車時都會增加。將值從組件傳遞到父實例

我需要使用該值來更新模板中不屬於該組件的值。這可能嗎？

這裏的是我的父母Vue的實例的腳本：

new Vue({ 
    el: "#cart-app", 
    components: { 
    cart: cartComponent 
    }, 
    data: { 
    searchQuery: '', 
    appliedFilters: ['Day 1'], 
    purchaseData: json, 
    cCount: 0 // CARTCOUNT; NEEDS TO BE UPDATED FROM COMPONENT 
    } 
});

來源

2017-07-17 Suhail Gupta

我已經添加了一個nswer，但我可能會誤解你的問題。你是否將'cCount'作爲道具傳遞給'cart'組件？ – thanksd

這是使用.sync modifier理想的情況下。

從文檔：

當一個孩子組成變異有.SYNC一個道具，價值變化將反映在母公司

在你的情況，你可以將.sync修飾符添加到要在模板中綁定的cCount屬性（假定您的組件具有cCount屬性）：

<cart :c-count.sync="cCount"></cart>

而且在腳本的購物車組件發出時，計數器加一update:cCount事件：

methods: { 
    incrementCount() { 
    this.cartCount++; 
    this.$emit('update:cCount', this.cartCount); 
    } 
}

這將父Vue的實例的cCount屬性的值自動設置爲車組件的價值cartCount財產。

Here's a working fiddle.

此功能可在開始Vue的版本2.3.0，但如果您使用的是較早的版本，這將給你相同的功能：

<cart :c-count="cCount" @update:foo="val => cCount = val"></cart>

這是因爲<comp :foo.sync="bar"></comp>只是語法糖：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

來源

2017-07-17 17:58:41 thanksd

將值從組件傳遞到父實例

回答

相關問題