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

时间：2021-01-02 00:38:29

标签： javascript vue.js vuex

我的组件 IncomeList 中有一个方法，其中包含方法 sumValue。这个方法只是将不同的数字相加并输出一个值，例如3+5 = 8。在我的另一个组件OutputList中也是如此，使用相同的逻辑，但该方法称为sumValueOutput。现在我想在另一个名为 WinTotal 的组件中使用这两个值。我用 props 和 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>

输出列表：

<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>

1 个答案:

答案 0 :(得分：0)

我可以立即想到两种适合您的方法：

1) 使用总线传递数据

在 Vue 中，您可以相当轻松地在子组件与其父组件之间传递数据。在子组件中，您emit 将要发送的数据作为事件：

this.$emit('event-name', payload)

...而且，在父级中，您侦听事件，并对数据进行处理：

<child-component @event-name="doSomething($event)" />

但是在两个组件之间传递数据变得更加棘手。您可以通过子-父-子策略将数据从一个组件传递到另一个组件，但这会变得乏味。相反，您可以做的是创建一个 Bus：一个 Vue 实例，您将其导入到两个子组件中并直接在两者之间发出事件。

公共汽车很容易制作；只需要两行代码：

// Bus.js
import Vue from "vue";

export const Bus = new Vue();

因此，在您的子组件（IncomeList 和 OutputList）中，您导入总线：

import { Bus } from "@/Bus";

...并发出值为 sumValue 的事件（在 IncomeList 中）

sumValue() {
    const sumVal = this.incomesFiltered.reduce((a, c) => a + c.value, 0);
    Bus.$emit("sumvalue-change", sumVal);
    return sumVal;
}

...和sumOutputValue（在OutputList中）：

sumValueOutput() {
    const outputValue = this.outputsFiltered.reduce((a, c) => a + c.value, 0);
    Bus.$emit("sumvalueoutput-change", outputValue);
    return outputValue;
}

然后在 WinTotal.vue 中，您导入总线并在组件的 created 钩子中监听这些事件：

created() {
    Bus.$on("sumvalue-change", (sumvalue) => (this.sumValue = sumvalue));
    Bus.$on("sumvalueoutput-change", (sumvalueoutput) => (this.sumValueOutput = sumvalueoutput));
}

您现在可以随意使用 sumValue 中的 sumValueOutput 和 WinTotal，并且它们会在 IncomeList 或 {{1} 中发生变化时自动更新}}。

emit-demo-working

这是演示此解决方案的 sandbox。

然而，这种方法有一个缺点。假设您的 OutputList 如下所示：

App.vue

在这种情况下，// App.vue <template> <div id="app"> <IncomeList /> <OutputList /> <WinTotal /> </div> </template> 和 IncomeList 都在 OutputList 之前呈现，因此 WinTotal 和 sumValue 的初始值在之前发出，sumValueOutput甚至开始监听这些事件。因此，WinTotal 永远不会收到 WinTotal 和 sumValue 的初始值（见下文）。

emit-demo-broken

如您所见，sumValueOutput 最初并未使用这些值进行更新，但是当它们发生变化时，它们会被很好地更新。解决方法是将 WinTotal 放在 <WinTotal /> 和 <IncomeList /> 之前，但这并不总是可行的。当然你可以通过其他方式解决这个问题，但实施起来可能很乏味，而且不值得麻烦。所以，这是一个替代方案。

2) 使用 VueX 传递数据

一个更简单的解决方案是使用 VueX。我假设您已经对 VueX 有所了解，因为您已经提到您之前已经尝试过使用它，但如果有任何不清楚的地方，请告诉我。

假设已经设置了 VueX，在您的 store 中，在 state 中为 <OutputList /> 和 sumValueIncome 创建值，以及更新它们的 mutations：< /p> 

sumValueOutput

然后在 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { sumValueIncome: null, sumValueOutput: null }, mutations: { updatesumValueIncome(state, newvalue) { state.sumValueIncome = newvalue; }, updatesumValueOutput(state, newvalue) { state.sumValueOutput = newvalue; } }, actions: {}, modules: {} }); 中，您像之前的解决方案一样更新 IncomeList（当然，使用 sumValueIncome）：

VueX

...在sumValueIncome() { const sumValueIncome = this.incomesFiltered.reduce((a, c) => a + c.value, 0); this.$store.commit("updatesumValueIncome", sumValueIncome); return sumValueIncome; } 中：

OutputList

在 sumValueOutput() { const outputValue = this.outputsFiltered.reduce((a, c) => a + c.value, 0); this.$store.commit("updatesumValueOutput", outputValue); return outputValue; } 中，您可以使用 mapState 助手创建具有动态更新的 WinTotal 和 sumValue 值的计算属性：

sumValueOutput

...一切就绪！

vuex-demo

这是演示此解决方案的 sandbox。

相关问题
最新问题