質問編集履歴

2

タイトル変更

2020/10/30 14:42

投稿

et4500
et4500

スコア4

test CHANGED
@@ -1 +1 @@
1
- Vue.jsのコンポーネントでslotにつ
1
+ Vue.jsのコンポーネントでslotを使用して再利用可能なモーダルを作成した
test CHANGED
File without changes

1

文法や書式の変更

2020/10/30 14:42

投稿

et4500
et4500

スコア4

test CHANGED
@@ -1 +1 @@
1
- Vue.jsのコンポーネントでslot使用時、$emitされるものを別々反映させた
1
+ Vue.jsのコンポーネントでslotに
test CHANGED
@@ -1,24 +1,100 @@
1
- 初めまして。1点質問させていただきます。
2
-
3
- Vue.jsのコンポーネントを使用し、モーダルを作成しています。
1
+ CDN版のVue.jsのコンポーネントを使用し、モーダルを作成しています。
4
-
5
- コードはかなり簡略化し、質問させていただきます。
6
2
 
7
3
 
8
4
 
9
- ```js
5
+ 画像をクリックするとモーダルが表示されるように実装したく、
10
6
 
7
+ その画像同じセクションに何枚もあるので、
8
+
9
+ 画像ごとにその画像に合わせたコンテンツを表示したいと思っています。
10
+
11
+
12
+
13
+ モーダルの共通部分の中身をコンポーネント化し、名前付きスロットでHTML側からコンテンツに合わせた内容を挿入し、モーダルに表示させたいのですが、ただ名前付きスロットを使用するだけだと、どの画像をクリックしても同じコンテンツが表示されてしまいます(順番が後のv-slotが反映される)。
14
+
15
+
16
+
17
+ この場合の対処法などはありますか?ご教授いただけると幸いです、よろしくお願いいたします。
18
+
19
+
20
+
21
+ 下記のコードの場合、
22
+
23
+ `img1`をクリックしたら、`画像1のコンテンツです`を表示し、
24
+
25
+ `img2`をクリックしたら、`画像2のコンテンツです`を表示させたいです。
26
+
27
+
28
+
29
+ (また、`img1`, `img2`どちらをクリックしてもどちらのコンテンツも表示されているのですが、いずれもクリックしたときは`img2`のコンテンツが表示されます...。)
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+ ```HTML
38
+
39
+ <div id="app">
40
+
41
+ <div class="works-container">
42
+
43
+
44
+
45
+ <img src="image/img1.jpg" alt="画像1" v-on:click="openModal">
46
+
47
+ <open-modal v-show="showModal" @from-child="closeModal">
48
+
49
+ <template v-slot:img1>
50
+
51
+ <h3>画像1のコンテンツです</h3>
52
+
53
+ </template>
54
+
55
+ </open-modal>
56
+
57
+
58
+
59
+ <img src="image/img2.jpg" alt="画像2" v-on:click="openModal">
60
+
61
+ <open-modal v-show="showModal" @from-child="closeModal">
62
+
63
+ <template v-slot:img2>
64
+
65
+ <h3>画像2のコンテンツです</h3>
66
+
67
+ </template>
68
+
69
+ </open-modal>
70
+
71
+
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ ```
78
+
79
+ ```JS
80
+
11
- Vue.component("open-modal", {
81
+ Vue.component('open-modal', {
12
82
 
13
83
  template: `
14
84
 
15
- <div id="overlay" v-show="showModal" v-on:click="closeModal">
85
+ <div id="overlay" v-show="showModal" @click="exitModal">
16
86
 
17
- <div id="content">
87
+ <div id="works-content" @click="stopModal" @click="keepModal">
18
88
 
19
- <slot name="content"></slot>
20
89
 
90
+
91
+ <slot name="img1"></slot>
92
+
93
+ <slot name="img2"></slot>
94
+
95
+
96
+
21
- <button v-on:click="closeModal">CLOSE</button>
97
+ <button type="button" @click="exitModal">CLOSE</button>
22
98
 
23
99
  </div>
24
100
 
@@ -28,66 +104,50 @@
28
104
 
29
105
  methods: {
30
106
 
31
- clickEvent: function() {
107
+ exitModal: function () {
32
108
 
33
- this.$emit('comp-child')
109
+ this.$emit('from-child')
34
110
 
35
111
  },
112
+
113
+ keepModal: function () {
114
+
115
+ event.stopPropagation()
116
+
117
+ }
118
+
119
+ },
120
+
121
+ });
122
+
123
+
124
+
125
+ new Vue({
126
+
127
+ el: '#app',
128
+
129
+ data: {
130
+
131
+ showModal: false
132
+
133
+ },
134
+
135
+ methods: {
136
+
137
+ openModal: function () {
138
+
139
+ this.showModal = true
140
+
141
+ },
142
+
143
+ closeModal: function () {
144
+
145
+ this.showModal = false
146
+
147
+ }
36
148
 
37
149
  }
38
150
 
39
151
  })
40
152
 
41
153
  ```
42
-
43
-
44
-
45
- ```html
46
-
47
- <div id="app">
48
-
49
-
50
-
51
- <div class="container>
52
-
53
- <img src="image/content-1.jpg" alt="コンテンツ1" v-on:click="openModal">
54
-
55
- <open-modal v-show="showModal" v-on:from-child="closeModal">
56
-
57
- <p slot="content">コンテンツ1です</slot>
58
-
59
- </open-modal>
60
-
61
- </div>
62
-
63
-
64
-
65
- <div class="container>
66
-
67
- <img src="image/content-2.jpg" alt="コンテンツ2" v-on:click="openModal">
68
-
69
- <open-modal v-show="showModal" v-on:from-child="closeModal">
70
-
71
- <p slot="content">コンテンツ1です</slot>
72
-
73
- </open-modal>
74
-
75
- </div>
76
-
77
-
78
-
79
- </div>
80
-
81
-
82
-
83
-
84
-
85
- ```
86
-
87
-
88
-
89
- こうある場合、コンテンツ2の内容が1にも反映されてしまいます。
90
-
91
- 別のコンテンツとしてコンポーネントを使用し、再利用したいのですが何かいい方法などはありますか?
92
-
93
- ご教授いただけると幸いです。よろしくお願いいたします。