Javascript 将方法值传递给另一个组件

我的组件

IncomeList

中有一个方法，其中包含方法

sumValue

。这个方法只是将不同的数字相加，然后输出一个值，比如3+5=8。在我的另一个组件

OutputList

中，使用了相同的逻辑，但该方法称为

sumValueOutput

。现在我想在另一个名为

WinTotal

的组件中使用这两个值。我尝试了一些道具和vuex，但到目前为止，我还没有有效的产品，我也不知道如何开始。谢谢你的帮助

非融合者：

<template>
<div class="container-income">
    <button class="btn btn-info" @click="showModal">show modal</button>
    <div class="hidden-container-income" id="test123">
    <input type="text" class="income-input" placeholder="What needs to be done" v-model="newIncome" @keyup.enter="addincome">
    <input type="text" class="value-input" placeholder="€" v-model="newIncomeValue" @keyup.enter="addValue">
    <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
        <income-item v-for="income in incomesFiltered" :key="income.id" :income="income"
                   @removedIncome="removeincome">
        </income-item>
    </transition-group>

    <div class="extra-container">
        <div><label><input type="checkbox" style="display: none" :checked="!anyRemaining" @change="checkAllincomes"></label></div>
        <div>{{ remaining }} elements</div>
    </div>
    <div class="sum-container">
        <div><label> Total Income: </label></div>
        <div>{{ sumValue }} €</div>
    </div>
  </div>
</div>
    </template>
    <script>
    import IncomeItem from './IncomeItem'
    export default {
    name: 'income-list',
    components: {
        IncomeItem,
    },
    data () {
        return {
            newIncome: '',
            newIncomeValue: '',
            idForincome: 3,
            incomes: [
                {
                    'id': 1,
                    'title': 'Finish Vue Screencast',
                    'value': 300,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 2,
                    'title': 'Take over world',
                    'value': 315,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 3,
                    'title': 'Excellent',
                    'value': 313,
                    'completed': false,
                    'editing': false,
                },
            ]
        }
    },
    computed: {
        remaining() {
            return this.incomes.filter(income => !income.completed).length
        },
        anyRemaining() {
            return this.remaining != 0
        },
        incomesFiltered() {
            return this.incomes
        },
        sumValue() {
            return this.incomesFiltered.reduce((a, c) => a + c.value, 0)
        },
    },
    methods: {
            addincome() {
                if (this.newIncome.trim().length == 0) {
                    return
                }
                this.incomes.push({
                    id: this.idForincome,
                    title: this.newIncome,
                    value: this.newIncomeValue,
                    completed: false,
                })
                this.newIncome = ''
                this.newIncomeValue = ''
                this.this.idForincome++
            },

        removeincome(id) {
            const index = this.incomes.findIndex((item) => item.id == id)
            this.incomes.splice(index, 1)
        },
        checkAllincomes() {
            this.incomes.forEach((income) => income.completed = event.target.checked)
        },
        clearCompleted() {
            this.incomes = this.incomes.filter(income => !income.completed)
        },
        finishedEdit(data) {
            const index = this.incomes.findIndex((item) => item.id == data.id)
            this.incomes.splice(index, 1, data)
        },
        //Same for Value
        addValue() {
            if (this.newIncomeValue.trim().length == 0) {
                return
            }
            this.incomes.push({
                id: this.idForincome,
                title: this.newIncome,
                value: this.newIncomeValue,
                completed: false,
            })
            this.newIncome = ''
            this.newIncomeValue = ''
            this.this.idForincome++
        },
        showModal () {
            if (document.getElementById('test123').style.display == 'none' ) {
                document.getElementById('test123').style.display = 'block';
            }
            else {
                
                
document.getElementById('test123').style.display = 'none'
            }
        },
    },
};
                               </script>

显示模态
{{剩余}}}元素
总收入：
{{sumValue}}}€
从“./IncomeItem”导入IncomeItem
导出默认值{
姓名：'收入表'，
组成部分：{
因科梅蒂姆，
},
数据（）{
返回{
新收入：''，
newIncomeValue:“”，
idForincome:3，
收入：[
{
“id”：1，
“标题”：“完成Vue屏幕播放”，
“值”：300，
“已完成”：false，
“编辑”：false，
},
{
“id”：2，
‘标题’：‘接管世界’，
“值”：315，
“已完成”：false，
“编辑”：false，
},
{
"id":3,，
"标题":"优秀",，
“值”：313，
“已完成”：false，
“编辑”：false，
},
]
}
},
计算：{
剩余（）{
返回此.incomers.filter（income=>！income.completed）.length
},
剩余的（）{
返回此值。剩余！=0
},
incomesFiltered（）{
把这个还给我
},
sumValue（）{
返回此.incomesFiltered.reduce（（a，c）=>a+c.value，0）
},
},
方法：{
addincome（）{
if（this.newIncome.trim（）.length==0）{
返回
}
这是推({
id:这是idForincome，
标题：这是新收入，
value:this.newIncomeValue，
已完成：错误，
})
这是。新收入=“”
this.newIncomeValue=“”
这个，这个，我的名字++
},
删除名称（id）{
const index=this.incomers.findIndex（（item）=>item.id==id）
这个.收入.拼接（索引，1）
},
checkAllincomes（）{
this.incomes.forEach（（income）=>income.completed=event.target.checked）
},
clearCompleted（）{
this.incomers=this.incomers.filter（income=>！income.completed）
},
FinishedIt（数据）{
const index=this.incomers.findIndex（（item）=>item.id==data.id）
这个.收入.拼接（索引，1，数据）
},
//价值相同
附加值（）{
if（this.newIncomeValue.trim（）.length==0）{
返回
}
这是推({
id:这是idForincome，
标题：这是新收入，
value:this.newIncomeValue，
已完成：错误，
})
这是。新收入=“”
this.newIncomeValue=“”
这个，这个，我的名字++
},
showModal（）{
if（document.getElementById（'test123'）.style.display=='none'）{
document.getElementById（'test123'）.style.display='block'；
}
否则{
document.getElementById（'test123'）。style.display='none'
}
},
},
};

输出列表：

<template>
<div class="container-output1">
    <button class="btn btn-info1" @click="showModal">show modal</button>
    <div class="hidden-container-output1" id="test1231">
        <input type="text" class="output-input1" placeholder="What needs to be done" v-model="newOutput" @keyup.enter="addoutput">
        <input type="text" class="value-input1" placeholder="€" v-model="newOutputValue" @keyup.enter="addValue">
        <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
            <output-item v-for="output in outputsFiltered" :key="output.id" :output="output"
                         @removedoutput="removeOutput">
            </output-item>
        </transition-group>

        <div class="extra-container1">
            <div><label><input type="checkbox" style="display: none" :checked="!anyRemaining" @change="checkAlloutputs"></label></div>
            <div>{{ remaining }} elements</div>
        </div>
        <div class="sum-container1">
            <div><label> Total Output: </label></div>
            <div>{{ sumValueOutput }} €</div>
        </div>
    </div>
</div>
   </template>

   <script>
import OutputItem from './OutputItem'
export default {
    name: 'output-list',
    components: {
        OutputItem,
    },
    data () {
        return {
            newOutput: '',
            newOutputValue: '',
            idForOutput: 3,
            outputs: [
                {
                    'id': 1,
                    'title': 'Finish Vue Screencast',
                    'value': 300,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 2,
                    'title': 'Take over world',
                    'value': 315,
                    'completed': false,
                    'editing': false,
                },
                {
                    'id': 3,
                    'title': 'Excellent',
                    'value': 311,
                    'completed': false,
                    'editing': false,
                },
            ]
        }
    },
    computed: {
        remaining() {
            return this.outputs.filter(output => !output.completed).length
        },
        anyRemaining() {
            return this.remaining != 0
        },
        outputsFiltered() {
            return this.outputs
        },
        sumValueOutput() {
            var outputValue = this.outputsFiltered.reduce((a, c) => a + c.value, 0);
            return outputValue;
        },
    },
    methods: {
        addOutput() {
            if (this.newOutput.trim().length == 0) {
                return
            }
            this.outputs.push({
                id: this.idForOutput,
                title: this.newOutput,
                value: this.newOutputValue,
                completed: false,
            })
            this.newOutput = ''
            this.newOutputValue = ''
            this.this.idForOutput++
        },

        removeOutput(id) {
            const index = this.outputs.findIndex((item) => item.id == id)
            this.outputs.splice(index, 1)
        },
        checkAlloutputs() {
            this.outputs.forEach((output) => output.completed = event.target.checked)
        },
        clearCompleted() {
            this.outputs = this.outputs.filter(output => !output.completed)
        },
        finishedEdit(data) {
            const index = this.outputs.findIndex((item) => item.id == data.id)
            this.outputs.splice(index, 1, data)
        },
        //Same for Value
        addValue() {
            if (this.newOutputValue.trim().length == 0) {
                return
            }
            this.outputs.push({
                id: this.idForOutput,
                title: this.newOutput,
                value: this.newOutputValue,
                completed: false,
            })
            this.newOutput = ''
            this.newOutputValue = ''
            this.this.idForOutput++
        },
        showModal () {
            if (document.getElementById('test1231').style.display == 'none' ) {
                document.getElementById('test1231').style.display = 'block';
            }
            else {
                document.getElementById('test1231').style.display = 'none'
            }
        }

    }
}
            </script>

显示模态
{{剩余}}}元素
总产量：
{{sumValueOutput}}}€
从“./OutputItem”导入OutputItem
导出默认值{
名称：“输出列表”，
组成部分：{
门诊部，
},
数据（）{
返回{
新输出：“”，
newOutputValue:“”，
i输出：3，
产出：[
{
“id”：1，
“标题”：“完成Vue屏幕播放”，
“值”：300，
“已完成”：false，
“编辑”：false，
},
{
“id”：2，
‘标题’：‘接管世界’，
“值”：315，
“已完成”：false，
“编辑”：false，
},
{
"id":3,，
"标题":"优秀",，
“值”：311，
“已完成”：false，
“编辑”：false，
},
]
}
},
计算：{
剩余（）{
返回此.outputs.filter（output=>！output.completed）.length
},
剩余的（）{
返回此值。剩余！=0
},
输出过滤（）{
把这个还给我
},
sumValueOutput（）{
var outputValue=this.outputsFiltered.reduce（（a，c）=>a+c.value，0）；
返回输出值；
},
},
方法：{
addOutput（）{
if（this.newOutput.trim（）.length==0）{
返回
}
这个。输出。推({
id:this.idForOutput，
标题：this.newOutput，
价值