【Vue.js】「DOMテンプレート内」とはどこか？

前提・実現したいこと

スタイルガイド — Vue.js

上記に沿って、コンポーネント名等の変更をしようと思っています。

スタイルガイド — Vue.js#自己終了形式のコンポーネント

スタイルガイド内「自己終了形式のコンポーネント」には、下記のように記載されています。

中身を持たないコンポーネントは、単一ファイルコンポーネント、文字列テンプレート、およびJSXの中では自己終了形式で書くべきです。ただし、DOMテンプレート内ではそうしてはいけません。

「単一ファイルコンポーネント」とは、下記のような.vueファイルのことだと思うのですが、「DOMテンプレート内」とは何を指しているのでしょうか？

Parent.vue

vue
1<template>
2  <div class="parent">
3    Parent
4    <child :message="helloMessage"></child>
5  </div>
6</template>
7
8<script>
9import Child from '../components/Child'
10
11export default {
12  name: 'Parent',
13  components: {
14    Child
15  },
16  data () {
17    return {
18      helloMessage: 'hello world'
19    }
20  }
21}
22</script>

Child.vue

vue
1<template>
2  <div class="child">
3    child：{{ message }}
4  </div>
5</template>
6
7<script>
8export default {
9  name: 'Child',
10  props: ['message']
11}
12</script>

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

回答1件

ベストアンサー

そこで言っているDOMテンプレートとは，以下のようにHTMLに直接書かれているテンプレートのことです．

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5</head>
6<body>
7  <!-- ここから -->
8  <div id="app">
9    {{ message }}
10  </div>
11  <!-- ここまで -->
12  <script>
13    var app = new Vue({
14      el: '#app',
15      data: {
16        message: 'Hello Vue!'
17      }
18    });
19  </script>
20</body>
21</html>

英語版を見ると自己終了形式とはself-closingのことで，<my-component />のように，開始タグと終了タグを一つにしたもののことです．

そのスタイルガイドが言っていることはこういうことです．HTMLでは文法上，特定のタグ以外はself-closingにしてはいけないので，DOMテンプレートではしぶしぶ開始タグと終了タグに分けて書く必要があります．一方，.vueファイルはどうせWebpackのようなツールを使ってJavaScriptに変換されるので，HTMLのルールに従う必要がなく，self-closingにすることができ，そうすることを推奨しています．

投稿2020/02/25 09:24

編集2020/02/25 09:25