回答編集履歴
1
propsで値を渡して計算する方法を追記しました。
test
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
上記ソースを変更させていただくと以下のようなソース
|
|
23
|
+
上記ソースを変更させていただくと以下のようなソースがよろしいかと思います。
|
|
24
24
|
|
|
25
25
|
```HTML
|
|
26
26
|
|
|
@@ -91,3 +91,75 @@
|
|
|
91
91
|
上記の記述でsampleコンポーネントを汎用的に利用することが出来ると思います。
|
|
92
92
|
|
|
93
93
|
ご参考になれば幸いです。
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
追記
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
コメントでいただいたコンポーネントに値を渡してコンポーネント内のメソッドで処理をする場合以下のようなソースを考えてみました。
|
|
102
|
+
|
|
103
|
+
コンポーネントに値を渡す上で、sumの表示をコンポーネントに含めています。
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
|
|
109
|
+
<div id="app">
|
|
110
|
+
|
|
111
|
+
<sample v-bind:title="title" v-bind:num1="num1" v-bind:num2="num2"></sample>
|
|
112
|
+
|
|
113
|
+
↑ v-bindで値を渡す(今回はそれぞれ渡していますが、v-bind=オブジェクトで渡すこともできます。)
|
|
114
|
+
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<script>
|
|
118
|
+
|
|
119
|
+
Vue.component('sample', {
|
|
120
|
+
|
|
121
|
+
template: '<div><button v-on:click="btn">ボタン: {{ title }}</button><div>合計:{{ sum }}</div></div>', // sumの表示を移動しています。
|
|
122
|
+
|
|
123
|
+
props: ['title', 'num1', 'num2'], // propsに num1とnum2を追加しました。
|
|
124
|
+
|
|
125
|
+
data: function() {
|
|
126
|
+
|
|
127
|
+
return { sum: '' } // sumをコンポーネントに移動
|
|
128
|
+
|
|
129
|
+
},
|
|
130
|
+
|
|
131
|
+
methods: {
|
|
132
|
+
|
|
133
|
+
btn: function () {
|
|
134
|
+
|
|
135
|
+
this.sum = this.num1 + this.num2; // コンポーネント内で値を計算
|
|
136
|
+
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
var vm = new Vue({
|
|
144
|
+
|
|
145
|
+
el: "#app",
|
|
146
|
+
|
|
147
|
+
data: {
|
|
148
|
+
|
|
149
|
+
title:"計算",
|
|
150
|
+
|
|
151
|
+
num1:3,
|
|
152
|
+
|
|
153
|
+
num2:6
|
|
154
|
+
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
})
|
|
158
|
+
|
|
159
|
+
</script>
|
|
160
|
+
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
ご参考になれば幸いです。
|