teratail
回答率
85.47%
質問するログイン新規登録
トップVue.jsに関する質問Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントのメソッドを実行したい

編集履歴

質問編集履歴

25

修正

2022/02/22 07:20

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -69,7 +69,7 @@
69
69
  </div>
70
70
  </scirpt>
71
71
 
72
- <child-component2 ref="child2"><child-component2>
72
+ <child-component2 ref="child2"></child-component2>
73
73
  ```
74
74
 
75
75
  2022/02/22 16:17
@@ -77,7 +77,7 @@
77
77
  親コンポーネントから子コンポーネントのメソッドを実行したいです。
78
78
 
79
79
  次のそれぞれの宣言だとは思うのですが、
80
- html : <child-component2 ref="child2"><child-component2>
80
+ html : <child-component2 ref="child2"></child-component2>
81
81
  javascript: this.$refs.child2.send();
82
82
 
83
83
 
Vue.jsHTML5JavaScript

24

修正

2022/02/22 07:19

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -75,3 +75,9 @@
75
75
  2022/02/22 16:17
76
76
  タイトルと本文を修正しました。
77
77
  親コンポーネントから子コンポーネントのメソッドを実行したいです。
78
+
79
+ 次のそれぞれの宣言だとは思うのですが、
80
+ html : <child-component2 ref="child2"><child-component2>
81
+ javascript: this.$refs.child2.send();
82
+
83
+
Vue.jsHTML5JavaScript

23

修正

2022/02/22 07:18

投稿

mee12
mee12

スコア101

test CHANGED
@@ -1 +1 @@
1
- Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントにアクセスしたい
1
+ Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントのメソッドを実行したい
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントにアクセスしたいのですが、わからなくて困っています。
1
+ Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントのメソッドを実行したいのですが、わからなくて困っています。
2
2
  どなたか解決方法をご存知であれば教えて下さい。
3
3
 
4
4
 
@@ -71,3 +71,7 @@
71
71
 
72
72
  <child-component2 ref="child2"><child-component2>
73
73
  ```
74
+
75
+ 2022/02/22 16:17
76
+ タイトルと本文を修正しました。
77
+ 親コンポーネントから子コンポーネントのメソッドを実行したいです。
Vue.jsHTML5JavaScript

22

修正

2022/02/22 06:37

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
  methods: {
15
15
  do () {
16
16
  // this.$refs.child2がundefindなのでエラー
17
- this.$refs.child2.send;
17
+ this.$refs.child2.send();
18
18
  },
19
19
 
20
20
  receive(data) {
Vue.jsHTML5JavaScript

21

修正

2022/02/22 06:36

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
  ```html
55
55
  <!-- index.html -->
56
56
  <div id="app">
57
- <button type="button" v-on:click="do()">
57
+ <button type="button" v-on:click="do()">
58
58
  </div>
59
59
 
60
60
  // Partial view (modal)
Vue.jsHTML5JavaScript

20

修正

2022/02/22 06:35

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,11 @@
12
12
  },
13
13
 
14
14
  methods: {
15
+ do () {
16
+ // this.$refs.child2がundefindなのでエラー
17
+ this.$refs.child2.send;
18
+ },
19
+
15
20
  receive(data) {
16
21
  this.rowData = data;
17
22
  },
@@ -48,8 +53,8 @@
48
53
 
49
54
  ```html
50
55
  <!-- index.html -->
51
- <div id="app">
56
+ <div id="app">
52
- Parent component
57
+ <button type="button" v-on:click="do()">
53
58
  </div>
54
59
 
55
60
  // Partial view (modal)
@@ -61,8 +66,6 @@
61
66
  <script type="text/x-template" id="child-component2">
62
67
  <div>
63
68
  custom component2★
64
- <!-- this.$refs.child2がundefinedなのでエラー -->
65
- <button type="button" v-on:click="this.$refs.child2.send()">
66
69
  </div>
67
70
  </scirpt>
68
71
 
Vue.jsHTML5JavaScript

19

修正

2022/02/22 06:33

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -60,7 +60,8 @@
60
60
  <!-- child-component2.html -->
61
61
  <script type="text/x-template" id="child-component2">
62
62
  <div>
63
- custom component2★ ボタン実行でエラー
63
+ custom component2★
64
+ <!-- this.$refs.child2がundefinedなのでエラー -->
64
65
  <button type="button" v-on:click="this.$refs.child2.send()">
65
66
  </div>
66
67
  </scirpt>
Vue.jsHTML5JavaScript

18

修正

2022/02/22 06:32

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -60,9 +60,10 @@
60
60
  <!-- child-component2.html -->
61
61
  <script type="text/x-template" id="child-component2">
62
62
  <div>
63
- custom component2★
63
+ custom component2★ ボタン実行でエラー
64
+ <button type="button" v-on:click="this.$refs.child2.send()">
64
65
  </div>
65
66
  </scirpt>
66
67
 
67
- <child-component2><child-component2>
68
+ <child-component2 ref="child2"><child-component2>
68
69
  ```
Vue.jsHTML5JavaScript

17

修正

2022/02/22 06:30

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -41,7 +41,7 @@
41
41
  template: "#child-component2"
42
42
  };
43
43
 
44
- app.component("child-component2", childComponent);
44
+ app.component("child-component2", childComponent2);
45
45
 
46
46
  app.mount("#app");
47
47
  ```
Vue.jsHTML5JavaScript

16

修正

2022/02/22 06:30

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -48,9 +48,8 @@
48
48
 
49
49
  ```html
50
50
  <!-- index.html -->
51
-
52
51
  <div id="app">
53
-
52
+ Parent component
54
53
  </div>
55
54
 
56
55
  // Partial view (modal)
Vue.jsHTML5JavaScript

15

修正

2022/02/22 06:29

投稿

mee12
mee12

スコア101

test CHANGED
@@ -1 +1 @@
1
- Vue.js3のx-templateでhtmlファイルを利用するときにエラーが発生して困っています。
1
+ Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントにアクセスしたい
test CHANGED
@@ -1,10 +1,6 @@
1
- Vue.js3のx-templateでhtmlファイルを利用するときにエラーが発生して困っています。
1
+ Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントにアクセスしたいのですが、わからなくて困っています。
2
2
  どなたか解決方法をご存知であれば教えて下さい。
3
3
 
4
- (発生したエラー)
5
- Vue warn: Template compilation error: Tags with side effect <script> and <style> are ignored in client component templates.
6
- Vue warn: Method "template" has type "string" in the component definition. Did you reference the function correctly?
7
- Vue warn: Component is missing template or render function.
8
4
 
9
5
  ```javascript
10
6
  // index.js
@@ -51,6 +47,17 @@
51
47
  ```
52
48
 
53
49
  ```html
50
+ <!-- index.html -->
51
+
52
+ <div id="app">
53
+
54
+ </div>
55
+
56
+ // Partial view (modal)
57
+ // child-component2.html
58
+ ```
59
+
60
+ ```html
54
61
  <!-- child-component2.html -->
55
62
  <script type="text/x-template" id="child-component2">
56
63
  <div>
Vue.jsHTML5JavaScript

14

修正

2022/02/22 06:01

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
  }
23
23
  });
24
24
 
25
- app.component("child-component2", {
25
+ const childComponent2 = {
26
26
  // 親のデータをpropsで受け取る
27
27
  props: {
28
28
  rowData: Array,
@@ -43,7 +43,9 @@
43
43
  },
44
44
 
45
45
  template: "#child-component2"
46
- });
46
+ };
47
+
48
+ app.component("child-component2", childComponent);
47
49
 
48
50
  app.mount("#app");
49
51
  ```
Vue.jsHTML5JavaScript

13

修正

2022/02/22 05:59

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -55,4 +55,6 @@
55
55
  custom component2★
56
56
  </div>
57
57
  </scirpt>
58
+
59
+ <child-component2><child-component2>
58
60
  ```
Vue.jsHTML5JavaScript

12

修正

2022/02/22 05:58

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -42,7 +42,7 @@
42
42
  },
43
43
  },
44
44
 
45
- template: "#child-component2#"
45
+ template: "#child-component2"
46
46
  });
47
47
 
48
48
  app.mount("#app");
Vue.jsHTML5JavaScript

11

修正

2022/02/22 05:58

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -1,11 +1,10 @@
1
1
  Vue.js3のx-templateでhtmlファイルを利用するときにエラーが発生して困っています。
2
2
  どなたか解決方法をご存知であれば教えて下さい。
3
3
 
4
- ```console
4
+ (発生したエラー)
5
5
  Vue warn: Template compilation error: Tags with side effect <script> and <style> are ignored in client component templates.
6
6
  Vue warn: Method "template" has type "string" in the component definition. Did you reference the function correctly?
7
7
  Vue warn: Component is missing template or render function.
8
- ```
9
8
 
10
9
  ```javascript
11
10
  // index.js
Vue.jsHTML5JavaScript

10

修正

2022/02/22 05:57

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,10 @@
1
1
  Vue.js3のx-templateでhtmlファイルを利用するときにエラーが発生して困っています。
2
2
  どなたか解決方法をご存知であれば教えて下さい。
3
3
 
4
- ```Console
4
+ ```console
5
- [Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
5
+ Vue warn: Template compilation error: Tags with side effect <script> and <style> are ignored in client component templates.
6
- [Vue warn]: Method "template" has type "string" in the component definition. Did you reference the function correctly?
6
+ Vue warn: Method "template" has type "string" in the component definition. Did you reference the function correctly?
7
- [Vue warn]: Component is missing template or render function.
7
+ Vue warn: Component is missing template or render function.
8
8
  ```
9
9
 
10
10
  ```javascript
Vue.jsHTML5JavaScript

9

修正

2022/02/22 05:53

投稿

mee12
mee12

スコア101

test CHANGED
@@ -1 +1 @@
1
- Vue.js3で単一ファイルコンポーネント(.vue)を使わずに、componentのtemplate部分に外部のhtmlファイルを使用したい
1
+ Vue.js3のx-templateでhtmlファイルを利用するときにエラーが発生して困っています。
test CHANGED
@@ -1,6 +1,11 @@
1
- Vue.js3で単一ファイルコンポーネント(.vue)を使わずに、
2
- componentのtemplate部分に外部のhtmlファイルを使用したいのですが、
1
+ Vue.js3のx-templateでhtmlファイルを利用するときにエラーが発生して困っています。
3
- ご存知の方いらっしゃいますでしょうか？
2
+ どなたか解決方法をご存知であれば教えて下さい。
3
+
4
+ ```Console
5
+ [Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
6
+ [Vue warn]: Method "template" has type "string" in the component definition. Did you reference the function correctly?
7
+ [Vue warn]: Component is missing template or render function.
8
+ ```
4
9
 
5
10
  ```javascript
6
11
  // index.js
@@ -38,9 +43,7 @@
38
43
  },
39
44
  },
40
45
 
41
- template: `<div>
46
+ template: "#child-component2#"
42
- custom component1
43
- </div>`
44
47
  });
45
48
 
46
49
  app.mount("#app");
@@ -48,7 +51,9 @@
48
51
 
49
52
  ```html
50
53
  <!-- child-component2.html -->
54
+ <script type="text/x-template" id="child-component2">
51
- <div>
55
+ <div>
52
- custom component2★
56
+ custom component2★
53
- </div>
57
+ </div>
58
+ </scirpt>
54
59
  ```
Vue.jsHTML5JavaScript

8

修正

2022/02/22 05:01

投稿

mee12
mee12

スコア101

test CHANGED
@@ -1 +1 @@
1
- Vue.js3で単一ファイルコンポーネント(.vue)を使わずに、componentのtemplate部分にhtmlファイルに書いたコードを使用したい
1
+ Vue.js3で単一ファイルコンポーネント(.vue)を使わずに、componentのtemplate部分に外部のhtmlファイルを使用したい
test CHANGED
@@ -1,5 +1,5 @@
1
1
  Vue.js3で単一ファイルコンポーネント(.vue)を使わずに、
2
- componentのtemplate部分にhtmlファイルに書いたコードを使用したいのですが、
2
+ componentのtemplate部分に外部のhtmlファイルを使用したいのですが、
3
3
  ご存知の方いらっしゃいますでしょうか？
4
4
 
5
5
  ```javascript
Vue.jsHTML5JavaScript

7

修正

2022/02/22 04:00

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -12,9 +12,8 @@
12
12
  },
13
13
 
14
14
  methods: {
15
- test() {
15
+ receive(data) {
16
- // これは間違っているかも
17
- // this.rowData = $event;
16
+ this.rowData = data;
18
17
  },
19
18
  }
20
19
  });
@@ -35,7 +34,7 @@
35
34
  methods: {
36
35
  // $emitで親のイベントを実行
37
36
  send() {
38
- this.$emit("test", childRowData);
37
+ this.$emit("receive", childRowData);
39
38
  },
40
39
  },
41
40
 
Vue.jsHTML5JavaScript

6

修正

2022/02/22 03:58

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -13,7 +13,8 @@
13
13
 
14
14
  methods: {
15
15
  test() {
16
+ // これは間違っているかも
16
- this.rowData = $event;
17
+ // this.rowData = $event;
17
18
  },
18
19
  }
19
20
  });
Vue.jsHTML5JavaScript

5

修正

2022/02/22 03:57

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  methods: {
15
15
  test() {
16
-
16
+ this.rowData = $event;
17
17
  },
18
18
  }
19
19
  });
Vue.jsHTML5JavaScript

4

修正

2022/02/22 03:55

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -3,6 +3,7 @@
3
3
  ご存知の方いらっしゃいますでしょうか？
4
4
 
5
5
  ```javascript
6
+ // index.js
6
7
  const app = Vue.createApp({
7
8
  data() {
8
9
  return {
@@ -17,7 +18,7 @@
17
18
  }
18
19
  });
19
20
 
20
- app.component("child-component1", {
21
+ app.component("child-component2", {
21
22
  // 親のデータをpropsで受け取る
22
23
  props: {
23
24
  rowData: Array,
@@ -38,7 +39,7 @@
38
39
  },
39
40
 
40
41
  template: `<div>
41
- custom component
42
+ custom component1
42
43
  </div>`
43
44
  });
44
45
 
@@ -46,7 +47,8 @@
46
47
  ```
47
48
 
48
49
  ```html
50
+ <!-- child-component2.html -->
49
51
  <div>
50
- custom component★
52
+ custom component2★
51
53
  </div>
52
54
  ```
Vue.jsHTML5JavaScript

3

修正

2022/02/22 03:54

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -44,3 +44,9 @@
44
44
 
45
45
  app.mount("#app");
46
46
  ```
47
+
48
+ ```html
49
+ <div>
50
+ custom component★
51
+ </div>
52
+ ```
Vue.jsHTML5JavaScript

2

修正

2022/02/22 03:52

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -33,7 +33,7 @@
33
33
  methods: {
34
34
  // $emitで親のイベントを実行
35
35
  send() {
36
- this.$emit(test, childRowData);
36
+ this.$emit("test", childRowData);
37
37
  },
38
38
  },
39
39
 
Vue.jsHTML5JavaScript

1

修正

2022/02/22 03:52

投稿

mee12
mee12

スコア101

test CHANGED
File without changes
test CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
  });
19
19
 
20
- app.component("children-component1", {
20
+ app.component("child-component1", {
21
21
  // 親のデータをpropsで受け取る
22
22
  props: {
23
23
  rowData: Array,
@@ -33,7 +33,7 @@
33
33
  methods: {
34
34
  // $emitで親のイベントを実行
35
35
  send() {
36
- this.$emit("親のイベント", "送信するデータ");
36
+ this.$emit(test, childRowData);
37
37
  },
38
38
  },
39
39
 
Vue.jsHTML5JavaScript