You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In 2.x, Vue provided the `inline-template`attribute on child components to use its inner content as its template instead of treating it as distributed content.
<p>These are compiled as the component's own template.</p>
20
-
<p>Not parent's transclusion content.</p>
19
+
<p>これらはコンポーネント自身のテンプレートとしてコンパイルされます。</p>
20
+
<p>親のトランスクルージョンコンテンツではありません。</p>
21
21
</div>
22
22
</my-component>
23
23
```
24
24
25
-
## 3.x Syntax
25
+
## 3.x での構文
26
26
27
-
This feature will no longer be supported.
27
+
この機能はサポートされなくなります。
28
28
29
-
## Migration Strategy
29
+
## 移行の戦略
30
30
31
-
Most of the use cases for `inline-template`assumes a no-build-tool setup, where all templates are written directly inside the HTML page.
31
+
`inline-template`のユースケースの多くでは、すべてのテンプレートが HTML ページ内に直接書かれるようなビルドツールを使わないセットアップを想定しています。
32
32
33
-
### Option#1: Use `<script>`tag
33
+
### オプション#1: `<script>`タグを使う
34
34
35
-
The most straightforward workaround in such cases is using `<script>`with an alternative type:
35
+
このような場合の最も簡単な回避策は、`<script>`を代替として使うことです:
36
36
37
37
```js
38
38
<script type="text/html" id="my-comp-template">
39
39
<div>{{ hello }}</div>
40
40
</script>
41
41
```
42
42
43
-
And in the component, target the template using a selector:
43
+
そしてコンポーネントの中でセレクタを使ってテンプレートをターゲットにします:
44
44
45
45
```js
46
46
constMyComp= {
@@ -49,34 +49,34 @@ const MyComp = {
49
49
}
50
50
```
51
51
52
-
This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability.
52
+
これはビルドセットアップを必要とせず、すべてのブラウザで動作し、DOM 内の HTML 解析に関係する警告対象にならず(例えばキャメルケースのプロパティ名を使えます)、 ほとんどの IDE で適切なシンタックスハイライトを提供します。従来のサーバーサイドのフレームワークでは、これらのテンプレートをサーバーテンプレートのパーシャル(メインの HTML テンプレートに含まれます)に分割して保守性を向上させることができます。
53
53
54
-
### Option#2: Default Slot
54
+
### オプション#2: デフォルトのスロット
55
55
56
-
A component previously using `inline-template`can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline:
0 commit comments