回答編集履歴
1
回答の変更
test
CHANGED
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
|
|
17
17
|
<div id="app">
|
|
18
18
|
|
|
19
|
-
<div class="hoge" :style="{ background: color}">親</div>
|
|
19
|
+
<div class="hoge" :style="{ background: color}">親</div>
|
|
20
20
|
|
|
21
|
-
<FirstComponent @onClick="changeColor"
|
|
21
|
+
<FirstComponent @onClick="changeColor" :color="color"/>
|
|
22
22
|
|
|
23
|
-
<
|
|
23
|
+
<FirstComponent @onClick="changeColor" :color="color"/>
|
|
24
24
|
|
|
25
25
|
</div>
|
|
26
26
|
|
|
@@ -32,8 +32,6 @@
|
|
|
32
32
|
|
|
33
33
|
import FirstComponent from './components/FirstComponent.vue'
|
|
34
34
|
|
|
35
|
-
import SecondComponent from './components/SecondComponent.vue'
|
|
36
|
-
|
|
37
35
|
|
|
38
36
|
|
|
39
37
|
export default {
|
|
@@ -42,9 +40,7 @@
|
|
|
42
40
|
|
|
43
41
|
components: {
|
|
44
42
|
|
|
45
|
-
FirstComponent
|
|
43
|
+
FirstComponent
|
|
46
|
-
|
|
47
|
-
SecondComponent
|
|
48
44
|
|
|
49
45
|
},
|
|
50
46
|
|
|
@@ -84,19 +80,17 @@
|
|
|
84
80
|
|
|
85
81
|
</style>
|
|
86
82
|
|
|
87
|
-
|
|
88
|
-
|
|
89
83
|
```
|
|
90
84
|
|
|
91
85
|
|
|
92
86
|
|
|
93
|
-
親から渡されたcolor変更処理
|
|
87
|
+
親から渡されたcolorの変更処理を記載
|
|
94
88
|
|
|
95
|
-
|
|
89
|
+
表示に利用するcolorは親から取得する
|
|
96
90
|
|
|
97
91
|
|
|
98
92
|
|
|
99
|
-
子
|
|
93
|
+
子
|
|
100
94
|
|
|
101
95
|
```vue
|
|
102
96
|
|
|
@@ -104,7 +98,7 @@
|
|
|
104
98
|
|
|
105
99
|
<div>
|
|
106
100
|
|
|
107
|
-
<div class="hoge" :style="{background:
|
|
101
|
+
<div class="hoge" :style="{background: color}">子1</div>
|
|
108
102
|
|
|
109
103
|
<input type="text" v-model="inputColor">
|
|
110
104
|
|
|
@@ -122,11 +116,11 @@
|
|
|
122
116
|
|
|
123
117
|
name: 'FirstComponet',
|
|
124
118
|
|
|
119
|
+
props: ['color'],
|
|
120
|
+
|
|
125
121
|
data: function() {
|
|
126
122
|
|
|
127
123
|
return {
|
|
128
|
-
|
|
129
|
-
myColor: '',
|
|
130
124
|
|
|
131
125
|
inputColor: ''
|
|
132
126
|
|
|
@@ -137,8 +131,6 @@
|
|
|
137
131
|
methods: {
|
|
138
132
|
|
|
139
133
|
changeColor: function() {
|
|
140
|
-
|
|
141
|
-
this.myColor = this.inputColor;
|
|
142
134
|
|
|
143
135
|
this.$emit('onClick', this.inputColor);
|
|
144
136
|
|
|
@@ -164,52 +156,4 @@
|
|
|
164
156
|
|
|
165
157
|
```
|
|
166
158
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
受け取ったcolorを元に子2が持つdivタグの色をつけています。
|
|
170
|
-
|
|
171
|
-
子2
|
|
172
|
-
|
|
173
|
-
```vue
|
|
174
|
-
|
|
175
|
-
<template>
|
|
176
|
-
|
|
177
|
-
<div>
|
|
178
|
-
|
|
179
|
-
<div class="hoge" :style="{background: color}">子2</div>
|
|
180
|
-
|
|
181
|
-
</div>
|
|
182
|
-
|
|
183
|
-
</template>
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
<script>
|
|
188
|
-
|
|
189
|
-
export default {
|
|
190
|
-
|
|
191
|
-
name: 'SecondComponet',
|
|
192
|
-
|
|
193
|
-
props: ['color']
|
|
194
|
-
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
</script>
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
<style scoped>
|
|
202
|
-
|
|
203
|
-
.hoge {
|
|
204
|
-
|
|
205
|
-
width: 200px;
|
|
206
|
-
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
</style>
|
|
210
|
-
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
159
|
ご参考になれば幸いです。
|