使用发射在2个不同组件之间传递数据

Question

我是vueJS的新手。我正在使用vue2。我有3个组件catalogue.vue，sellingPrice.vue和profit.vue。 Catalogue.vue是包含价格，售价和利润百分比的所有产品的列表。售价和利润百分比是目录组件中的各个组成部分。方案是，编辑售价时，应自动计算利润，而手动输入利润时，应自动计算售价。我很难将利润百分比传递给目录。

我尝试在利润中使用$ emit，在目录中使用$ on。我看不到工作。有人可以帮我解决这个问题。

Profit.vue。

<template id="profit">
    <div>
        <div v-if="!isActive" @click="toggle()">
                <span>{{ calculateProfit }}%</span>
        </div>
        <div v-if="isActive" class="control has-icons-right">
            <input v-model="calculateProfit" class="input is-medium" type="text" placeholder="Text input">
            <div class="icon-container is-pulled-right">
            <span class="icon is-medium is-right edit-success" @click="emitProfitPercentage()">
                <i class="fas fa-check is-success" />
            </span>
            <span class="icon is-medium is-right edit-cancel" @click="toggle()">
                <i class="fas fa-times" />

            </span>
            </div>
        </div>
    </div>
</template>

computed:{
    calculateProfit:{
        get(){
            let profPercentage = 0;
            if(this.product.profit > 0){
                profPercentage = this.product.profit;
            }else{
                let  profitPercentage = 0;
                let profitAmt = 0;
                if(this.product.sellingCost === 0){
                    profitPercentage = 0;
                }else if(this.product.calculatedLandedPrice > 0 && this.product.sellingCost > 0){
                    profitAmt = this.product.sellingCost - this.product.calculatedLandedPrice;
                    profitPercentage =  Math.round((profitAmt/this.product.cost)*100);
                }else if(this.product.calculatedLandedPrice === 0 && this.product.sellingCost > 0){
                    profitAmt = this.product.sellingCost - this.product.cost;
                    profitPercentage =  Math.round((profitAmt/this.product.cost)*100);
                }
                profPercentage= profitPercentage;
            }
            return profPercentage;

        }, 
        set(newValue){
            this.product.profit = newValue;
        }
    },

},
methods:{
    toggle() {
        this.isActive = !this.isActive;
    },
    emitProfitPercentage(){
        console.log('calculateProfit:', this.product.profit);
        this.$emit('update-profit',this.product.profit);
        this.toggle();
    }
}

Catalogue.vue：

updateSellingPrice(profit){
console.log('profit:', profit);
}

还尝试使用this。$ on在内部创建。看来效果不佳。