teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

propsで値を渡して計算する方法を追記しました。

2021/01/27 15:06

投稿

Twoshi
Twoshi

スコア354

answer CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  そのため、emitを使用してボタン押下時の処理を設定できるようにするのが望ましいと考えます。
11
11
 
12
- 上記ソースを変更させていただくと以下のようなソースはいかょう
12
+ 上記ソースを変更させていただくと以下のようなソースがよろと思います。
13
13
  ```HTML
14
14
  <div id="app">
15
15
  ↓ v-onを利用しコンポーネントにボタン押下時にしたい処理を渡します。
@@ -44,4 +44,40 @@
44
44
  ```
45
45
 
46
46
  上記の記述でsampleコンポーネントを汎用的に利用することが出来ると思います。
47
+ ご参考になれば幸いです。
48
+
49
+ 追記
50
+ ---
51
+ コメントでいただいたコンポーネントに値を渡してコンポーネント内のメソッドで処理をする場合以下のようなソースを考えてみました。
52
+ コンポーネントに値を渡す上で、sumの表示をコンポーネントに含めています。
53
+
54
+ ```html
55
+ <div id="app">
56
+ <sample v-bind:title="title" v-bind:num1="num1" v-bind:num2="num2"></sample>
57
+      ↑ v-bindで値を渡す(今回はそれぞれ渡していますが、v-bind=オブジェクトで渡すこともできます。)
58
+ </div>
59
+ <script>
60
+ Vue.component('sample', {
61
+ template: '<div><button v-on:click="btn">ボタン: {{ title }}</button><div>合計:{{ sum }}</div></div>', // sumの表示を移動しています。
62
+ props: ['title', 'num1', 'num2'], // propsに num1とnum2を追加しました。
63
+ data: function() {
64
+ return { sum: '' } // sumをコンポーネントに移動
65
+ },
66
+ methods: {
67
+ btn: function () {
68
+ this.sum = this.num1 + this.num2; // コンポーネント内で値を計算
69
+ }
70
+ }
71
+ });
72
+ var vm = new Vue({
73
+ el: "#app",
74
+ data: {
75
+ title:"計算",
76
+ num1:3,
77
+ num2:6
78
+ }
79
+ })
80
+ </script>
81
+ ```
82
+
47
83
  ご参考になれば幸いです。