Javascript Vue组件小计的总和

我需要在我的Vue应用程序中添加小计

根据用户输入，每个组件都有自己的小计。然后需要将它们添加到组件之外的另一个输入中

我一直被困在如何最好地引用组件之外的组件小计上。将计算属性添加到#应用程序中是最好的方法吗

Vue.JS循环2

{{预算}}费用
var budgetLine=Vue.extend({
模板：`
总计：${{totalQty}
+
-
`,
数据：函数（）{
返回{items:[]}；
},
计算：{
总数量（）{
返回此.items.reduce（（总计，项）=>{
退货总额+数量（项目数量）；
}, 0);
},
},
方法：{
附加项（）{
这个。项目。推({
数量：0
});
}, 
移除项目（项目）{
this.items.pop（item）；
}
},
安装的（）{
这是addItem（）
}
});
var budgetApp=新的Vue({
el:“#应用程序”，
数据：{
预算：[‘一’、‘二’、‘三’]，
表格：{
收入：0，
费用：0，
收入：0
}
}, 
组成部分：{
“预算行”：预算行
}, 
方法：{
更新名称（事件）{
this.form.income=event.target.value
this.form.dispIncome=this.form.income-this.form.expenses
},
更新费用（事件）{
this.form.expenses=event.target.value
this.form.dispIncome=this.form.income-this.form.expenses
}
}
});

下面是修改后的代码，它将表单费用显示为您在每个预算部分下添加的多行费用的总和：

增加了手表和计算机的组合来实现这一点。以下是所做更改的概要：

• 在

  budgetLine

  中，组件添加了一个监视程序，以发出对

  totalQty的更改

• 在

  budgetApp

  组件将预算数据修改到对象中，添加了computed

  budgetKeys

  以呈现节名，添加了

  calculateExpense

  方法，该方法将在emit from budgetLine上调用以更新预算，并在预算上调用watcher以更新

  表单。费用

var budgetLine=Vue.extend({
模板：`
总计：${{totalQty}
+
-
`,
数据：函数（）{
返回{
项目：[]
};
},
观察：{
总数量（值）{
此.$emit（'update-expense'，值）
}
},
计算：{
总数量（）{
返回此.items.reduce（（总计，项）=>{
退货总额+数量（项目数量）；
}, 0);
},
},
方法：{
附加项（）{
这个。项目。推({
数量：0
});
},
移除项目（项目）{
this.items.pop（item）；
}
},
安装的（）{
这是addItem（）
}
});
var budgetApp=新的Vue({
el:“#应用程序”，
数据：{
预算：{
“一”：0，
“两个”：0，
“三”：0
},
表格：{
收入：0，
费用：0，
收入：0
}
},
组成部分：{
“预算行”：预算行
},
观察：{
预算：{
深：是的，
handler（）{
this.form.expenses=this.budgetKeys.reduce（（累计，关键）=>accum+this.budgets[key]，0）
}
}
},
计算：{
预算键（）{
返回Object.keys（this.budgets）
},
},
方法：{
更新名称（事件）{
this.form.income=event.target.value
this.form.dispIncome=this.form.income-this.form.expenses
},
更新费用（事件）{
this.form.expenses=event.target.value
this.form.dispIncome=this.form.income-this.form.expenses
},
计算费用（金额、预算）{
此项。预算[预算]=金额；
console.log（this.budgets）
}
}
});

Vue.JS循环2

{{预算}}费用
是否要将
总数量
共享给其父组件？我想将三个预算的总数量相加到表单中。费用输入
<div id="app">
    <h1 style="padding: 2em 0 1em">Vue.JS Loop 2</h1>
    <div class="total">
        <input :value="form.income" @change="updateIncome" type="number" class="form-control" name="income" id="income" placeholder="Income">
        <!--Add all subtotals here-->
        <input :value="form.expenses" @change="updateExpenses" type="number" step="any" class="form-control" name="expenses" id="expenses" placeholder="Expenses">
        <hr/>
        <input v-model="form.dispIncome" type="number" step="any" class="form-control" name="dispIncome" id="dispIncome" placeholder="Disposable Income">
    </div>
    <div class="budget-container">
        <div class="budget" v-for="budget in budgets">
            {{budget}} Expenses
            <budget-line></budget-line>
        </div>
    </div>
</div>

<script>
    var budgetLine = Vue.extend({
        template: `
            <div>
                <p id="result"><strong>Total:</strong> $ {{ totalQty }} </p>
            <div class="row" v-for="item in items">
                <input type="text" placeholder="Item"></input>
                <input type="text" placeholder="How much?" v-model="item.qty"></input>
                <button @click="addItem">+</button>
                <button @click="removeItem">-</button>
            </div>
            </div>
        `,

        data: function() {
            return { items: [] };
        },

        computed: {
            totalQty() {
                return this.items.reduce((total, item) => {
                    return total + Number(item.qty);
                }, 0);
            },
        },

        methods: {
            addItem() {
                this.items.push({
                    qty: 0
                });
            }, 
            removeItem(item) {
                this.items.pop(item);
            }
        },

        mounted() {
            this.addItem()
        }
    });

    var budgetApp = new Vue({
        el: '#app',
        data: {
            budgets: ['One', 'Two', 'Three'], 
            form: {
                income: 0,
                expenses: 0,
                dispIncome: 0
            }
        }, 
        components: {
            'budget-line': budgetLine
        }, 
        methods: {
            updateIncome(event) {
                this.form.income = event.target.value
                this.form.dispIncome = this.form.income - this.form.expenses
            },
            updateExpenses(event) {
                this.form.expenses = event.target.value
                this.form.dispIncome = this.form.income - this.form.expenses
            }
        }
    });

</script>