【Vue.js3】コンポーネントの使用方法

質問内容

Vue.js3の勉強をしていて、サンプルコードでわからないことがあったので質問させてください。

propsで用意した配列の要素を、テンプレートにはめ込んで、
コンポーネントとして使用するサンプルなのですが、

htmlで、作成したコンポーネントを複数使用する場合、

<div>で括らないと、1つ目のコンポーネントしか表示されなくなります。 <div>で括ると、複数のコンポーネントが読み込まれ、表示できるのですが、なぜこのような差が出るのかがわからないです。

propsに入れるときに、コンポーネントで指定した引数が配列に入っていると考えると、
htmlにコンポーネントを記載する度に上書きされて、

<div>で括らずとも、問題なく表示できそうな気がするのですが、、

app.component() が実行されるタイミング？
<div>で括ることで、別のタグとして判断できるようになる？
コンポーネントは連続で使用できない？

等のルールがあるのか、と思い調べてみたのですが、わかりませんでした。
なぜ<div>で括らないとコンポーネントを複数使用できないのか、
ご存知の方がいたらご教授願いたいです。

よろしくお願いいたします。

該当のソースコード

<index.html>

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8"/>
5        <title>My first Vue app</title>
6        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
7        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
8        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
9        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
10        <script src="https://unpkg.com/vue@next"></script>
11    </head>
12
13    <body>
14        <h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
15
16        <div id="app" class="container">
17            <p>{{ message }}</p>
18            <div>
19                <hello name="Taro" />
20            </div>
21            <div>
22                <hello name="Hanako" />
23            </div>
24        </div>
25
26        <script>
27            const appData = {
28                data() {
29                    return {
30                        message: '※コンポーネントを表示する。'
31                    }
32                }
33            }
34
35            let app = Vue.createApp(appData)
36
37            app.component('hello', {
38                props: ['name'],
39                data() {
40                    return {
41                        message: 'これは新しいメッセージです。'
42                    }
43                },
44                template: '<p class="alert alert-primary"> Hello, {{ name }}! </p>'
45            })
46
47            app.mount('#app')
48        </script>
49    </body>
50</html>

発生している問題

html
1<div id="app" class="container">
2    <p>{{ message }}</p>
3    <hello name="Taro" />
4    <hello name="Hanako" />
5</div>

このようにコードを直した場合、Taroしか表示されません。
なぜ<div>で括らないと複数使用できないのかが、わからないです。

行動規範の内容に同意します

回答1件

ベストアンサー

<div>で括らないと、1つ目のコンポーネントしか表示されなくなります。

多分エラーに出力されていると思うんですが(たぶん Component template should contain exactly one root element と。)

この言葉が指し示す通りルート（一番上）には1つの要素しか置けません。
まずはエラーログを確認しましょう（ブラウザのコンソール、エディタIDEの画面、ターミナル等）

投稿2021/03/07 11:01

mikkame

総合スコア5036

oden141

2021/03/07 12:54

@mikkameさんご確認いただきありがとうございました。教えてくださったエラーを調べたところ、「コンポーネントにはHTML親要素が必要」というルールがあるのだと理解できました。検証ツールを使用しConsoleを確認していたのですが、特にエラーも出ていなかったので気がつけませんでした。。 Finderからindex.htmlを開いていたから、コンソールにも特にエラーが出なかったのかな…と思いました。早急に教えてくださり、ありがとうございました！

oden141

2021/03/07 13:16 編集

＜まとめ＞「コンポーネントにはHTML親要素が必要」「ルート（一番上）には1つの要素しか置けない」 -> コンポーネントが一つの時は、そのまま書いても問題ない。 -> 複数存在する場合は、HTML要素を使用し一つにまとめなければならない。

行動規範の内容に同意します