【Vue.js】コンポーネント内で算出された複数の計算結果を、コンポーネント外で全て足し算したい

初歩的な質問で申し訳ございません。
最終的には、下記のようなイメージです。

[1] × [2] ＝ <2>
[3] × [5] ＝ <15>
[4] × [7] ＝ <28>

<45>
（2 ＋ 15 ＋ 28）

※ []が入力箇所、<>が自動計算箇所

コンポーネント内のcomputedで出力された計算結果を、全て足し算して計算結果を出力したいです。
コンポーネントを使用しなければ$emitなど考えなくていいと思いますが、今回はコンポーネントを用いた想定でお願いいたします。

上記の目標成果物に対して、下記2点がよくわかっておりません。

1点目：<input type="text" v-model="">と$emit を用いる方法

現在わかっていることは下記2点です。

子コンポーネントから親要素に情報を引き継ぐ際、$emitが必要
v-modelに対して$emitする場合は、v-modelを分解しないといけない

（:value="sum" @input="$emit(sum = $event.target.value)"）

しかし、どの参考例もbuttonを用いたもので、input textを用いた$emitの参考例がなく、進めなくなってしまいました。

２点目：v-forで出力されたv-modelの合算方法

1点目でとまっているので、まだ進めておりません。
調べた範囲では、下記のような書き方かなと思っております。

js
1this.lists.reduce(function(i, list) { return i + Number(list.sum); }

以上が質問になります。
下記に、現状のコードを記載させて頂きます。

現状のコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title></title>
5</head>
6<body>
7    <div id="app">
8         <calculation-input v-for="(list, i) in lists"></calculation-input>
9        <input type="text" name="" v-model="four">
10
11    </div>
12    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
13    <script src="main.js"></script>
14</body>
15</html>

js
1'use strict';
2
3
4Vue.component('calculation-input', {
5	data: function () {
6		return {
7			one: 0,
8			two: 0
9		}
10	},
11	template:`
12		<div>
13			<input type="number" v-model="one">
14			<input type="number" v-model="two">
15			<input class="input_sum" type="number" :value="sum" @input="$emit(sum = $event.target.value)">
16		</div>`,
17	computed: {
18		sum: function() {
19			return this.one * this.two;
20		}
21	}
22
23})
24
25let app = new Vue({
26	el: '#app',
27	data: function() {
28		return {
29			lists: [1, 2, 3, 4]
30		}
31	},
32　　// よくわらない箇所
33	computed: {
34		four: function() {
35			return this.sum * 0.1; // 全てのsumを取得する方法がわからない、$emit で子コンポーネントの値を取得する方法がわからない
36		}
37	}
38})

どうぞ、よろしくお願いいたします。

hoshi-takanori

2020/04/17 07:18

コンポーネントは表示に徹するべきだと思うので、計算はコンポーネントの外でやるべきでは。また、$emit はイベント用ではないでしょうか。

退会済みユーザー

2020/04/17 10:14

拙い質問に対して答えていただき、有難うございます。そうですね、結果コンポーネントをやめて、小計と合計をそれぞれ計算することにしました。有難うございます。

行動規範の内容に同意します

回答1件

ベストアンサー

コンポーネントの外に記述する方法にしました。

html
1    <div id="estimateCalculate">
2    	<table class="estimates_table_item">
3    		<tbody>
4    			<tr v-for="(list, i) in lists" v-cloak>
5    				<td>
6						<span class="item_detail_name">
7							<input class="text-center" type="number" v-bind:name="['item-num' + i]" v-model="list.num" placeholder="数量を記入">
8						</span>
9    				</td>
10    				<td>
11    					<span class="item_detail_name">
12    						<input class="text-right" type="number" v-bind:name="['item-unit' + i]" v-model="list.unit" placeholder="単価(税込)記入">
13    					</span>
14    				</td>
15    				<td>
16    					<span class="item_detail_name">
17    						<input class="text-right" type="number" v-bind:name="['item-total' + i]" v-model="list.num * list.unit" placeholder="金額を記入">
18    					</span>
19    				</td>
20    			</tr>
21    			<tr class="shokei">
22    				<td><input class="text-right" type="text" name="syohkei" v-model="shokei" readonly="readonly" title="自動計算エリア"></td>
23    			</tr>
24    		</tbody>
25    	</table>
26    </div>
27    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
28
29    <script>
30    	(function() {
31    		var estimateCalculate = new Vue ({
32    			el: '#estimateCalculate',
33    			data () {
34					return {
35						lists: [
36							{ num: 0,unit: 0, sum: 0 },
37							{ num: 0,unit: 0, sum: 0 },
38							{ num: 0,unit: 0, sum: 0 },
39							{ num: 0,unit: 0, sum: 0 },
40							{ num: 0,unit: 0, sum: 0 },
41							{ num: 0,unit: 0, sum: 0 }
42						]
43					}
44    			},
45    			methods: {
46    				sum: function() {
47    					let abc = 0;
48    					for (const list of this.lists) {
49    						abc += Number(list.num * list.unit);
50    					}
51    					return abc;
52				    },
53    			},
54    			computed: {
55    				shokei: function() {
56
57    					let abc = 0;
58    					for (const list of this.lists) {
59    						abc += Number(list.num * list.unit);
60    					}
61    					return abc;
62    				}
63    			}
64    		});
65    	})();
66    </script>