Skip to content

Commit 9c1ace7

Browse files
author
numa
committed
docs: translate inline-templete-attribute
1 parent 12f19df commit 9c1ace7

File tree

1 file changed

+23
-23
lines changed

1 file changed

+23
-23
lines changed

src/guide/migration/inline-template-attribute.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,44 @@ badges:
33
- breaking
44
---
55

6-
# Inline Template Attribute <MigrationBadges :badges="$frontmatter.badges" />
6+
# Inline Template 属性 <MigrationBadges :badges="$frontmatter.badges" />
77

8-
## Overview
8+
## 概要
99

10-
Support for the [inline-template feature](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) has been removed.
10+
[inline-template 機能](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates)のサポートは終了しました。
1111

12-
## 2.x Syntax
12+
## 2.x での構文
1313

14-
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.
14+
Vue 2.x では子コンポーネントの内部のコンテンツを分散コンテンツではなく、テンプレートとして使うようにするために子コンポーネントに `inline-template` 属性を提供していました。
1515

1616
```html
1717
<my-component inline-template>
1818
<div>
19-
<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>
2121
</div>
2222
</my-component>
2323
```
2424

25-
## 3.x Syntax
25+
## 3.x での構文
2626

27-
This feature will no longer be supported.
27+
この機能はサポートされなくなります。
2828

29-
## Migration Strategy
29+
## 移行の戦略
3030

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 ページ内に直接書かれるようなビルドツールを使わないセットアップを想定しています。
3232

33-
### Option #1: Use `<script>` tag
33+
### オプション #1: `<script>` タグを使う
3434

35-
The most straightforward workaround in such cases is using `<script>` with an alternative type:
35+
このような場合の最も簡単な回避策は、`<script>` を代替として使うことです:
3636

3737
```js
3838
<script type="text/html" id="my-comp-template">
3939
<div>{{ hello }}</div>
4040
</script>
4141
```
4242

43-
And in the component, target the template using a selector:
43+
そしてコンポーネントの中でセレクタを使ってテンプレートをターゲットにします:
4444

4545
```js
4646
const MyComp = {
@@ -49,34 +49,34 @@ const MyComp = {
4949
}
5050
```
5151

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 テンプレートに含まれます)に分割して保守性を向上させることができます。
5353

54-
### Option #2: Default Slot
54+
### オプション #2: デフォルトのスロット
5555

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:
56+
前に `inline-template` を使っていたコンポーネントは、デフォルトのスロットを使ってリファクタリングすることもできます。デフォルトのスロットを使うことで子コンテンツをインラインで書く利便性を保ちながらデータスコープをより明確にします:
5757

5858
```html
59-
<!-- 2.x Syntax -->
59+
<!-- 2.x での構文 -->
6060
<my-comp inline-template :msg="parentMsg">
6161
{{ msg }} {{ childState }}
6262
</my-comp>
6363

64-
<!-- Default Slot Version -->
64+
<!-- デフォルトのスロットを使うバージョン -->
6565
<my-comp v-slot="{ childState }">
6666
{{ parentMsg }} {{ childState }}
6767
</my-comp>
6868
```
6969

70-
The child, instead of providing no template, should now render the default slot\*:
70+
子ではテンプレートを提供しないかわりにデフォルトの slot\* をレンダリングする必要があります:
7171

7272
```html
7373
<!--
74-
in child template, render default slot while passing
75-
in necessary private state of child.
74+
子テンプレートでは、必要な子のプライベート状態を渡しながら
75+
デフォルトのスロットをレンダリングします。
7676
-->
7777
<template>
7878
<slot :childState="childState" />
7979
</template>
8080
```
8181

82-
> - Note: In 3.x, slots can be rendered as the root with native [fragments](/guide/migration/fragments) support!
82+
> - Note: 3.x ではネイティブの [fragments](/guide/migration/fragments) サポートを使うことでスロットをルートとしてレンダリングできます!

0 commit comments

Comments
 (0)