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
Copy file name to clipboardExpand all lines: ko-KR/src/api/options-composition.md
-6Lines changed: 0 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -248,12 +248,6 @@
248
248
249
249
B 컴포넌트 확장에 A 컴포넌트를 사용하면, A 컴포넌트의 옵션을 상속받을 수 있습니다.
250
250
251
-
From an implementation perspective, `extends` is almost identical to `mixins`. The component specified by `extends` will be treated as though it were the first mixin.
252
-
253
-
However, `extends` and `mixins` express different intents. The `mixins` option is primarily used to compose chunks of functionality, whereas `extends` is primarily concerned with inheritance.
254
-
255
-
As with `mixins`, any options will be merged using the relevant merge strategy.
Explicitly declare a display name for the component.
9
+
표시될 컴포넌트 이름을 명시적으로 선언합니다.
11
10
12
11
-**타입**:
13
12
@@ -19,47 +18,74 @@ Explicitly declare a display name for the component.
19
18
20
19
-**세부 사항**:
21
20
22
-
The name of a component is used for the following:
21
+
컴포넌트의 이름은 다음에 사용됩니다:
23
22
24
-
-Recursive self-reference in the component's own template
25
-
-Display in Vue DevTools' component inspection tree
26
-
-Display in warning component traces
23
+
-컴포넌트 자체 템플릿의 재귀적 참조
24
+
- Vue DevTools의 컴포넌트 검사 트리에 표시
25
+
-컴포넌트 경고 추적에 표시
27
26
28
-
When you use Single-File Components, the component already infers its own name from the filename. For example, a file named `MyComponent.vue` will have the inferred display name "MyComponent".
27
+
싱글 파일 컴포넌트를 사용할 때,
28
+
컴포넌트는 파일 이름으로 고유한 이름을 유추합니다.
29
+
예를 들어,
30
+
`MyComponent.vue`라는 파일에서 유추된 이름 "MyComponent"입니다.
29
31
30
-
Another case is that when a component is registered globally with [`app.component`](/api/application.html#app-component), the global ID is automatically set as its name.
32
+
또는 컴포넌트를 [`app.component`](/api/application.html#app-component)를 사용하여 전역으로 등록하면,
33
+
전역 ID가 자동으로 이름으로 설정되는 경우 입니다.
31
34
32
-
The `name` option allows you to override the inferred name, or to explicitly provide a name when no name can be inferred (e.g. when not using build tools, or an inlined non-SFC component).
35
+
`name` 옵션을 사용하면,
36
+
유추된 이름을 재정의하거나 이름을 유추할 수 없는 경우(예: 빌드 도구를 사용하지 않거나 인라인된 SFC가 아닌 컴포넌트를 사용하는 경우),
37
+
이름을 명시적으로 제공할 수 있습니다.
33
38
34
-
There is one case where `name` is explicitly necessary: when matching against cacheable components in [`<KeepAlive>`](/guide/built-ins/keep-alive.html) via its `include / exclude` props.
39
+
`name`이 명시적으로 필요한 경우는 단 하나로,
40
+
[`<KeepAlive>`](/guide/built-ins/keep-alive.html)의 `include / exclude` props를 통해 캐시 가능한 컴포넌트를 정의하는 경우입니다.
35
41
36
42
## inheritAttrs
37
43
38
44
-**타입**:
39
45
40
46
```ts
41
47
interfaceComponentOptions {
42
-
inheritAttrs?:boolean//default: true
48
+
inheritAttrs?:boolean//기본 값: true
43
49
}
44
50
```
45
51
46
52
-**세부 사항**:
47
53
48
-
By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting `inheritAttrs` to `false`, this default behavior can be disabled. The attributes are available via the `$attrs` instance property and can be explicitly bound to a non-root element using `v-bind`.
54
+
기본적으로 props로 인식되지 않는 부모 범위(scope)의 속성 바인딩은 "폴스루(fallthrough)"됩니다.
55
+
즉, 싱글 루트 컴포넌트가 있는 경우,
56
+
이러한 바인딩이 일반 HTML 속성으로 자식 컴포넌트의 루트 엘리먼트에 적용됩니다.
57
+
대상이 되는 엘리먼트 또는 다른 컴포넌트를 래핑하는 컴포넌트를 작성할 때,
58
+
이러한 동작을 원치 않을 수 있습니다.
59
+
`inheritAttrs`를 `false`로 설정하면,
60
+
이 기본 동작을 비활성화할 수 있습니다.
61
+
속성은 `$attrs` 인스턴스 속성을 통해 사용할 수 있으며,
62
+
`v-bind`를 사용하여 루트가 아닌 요소에 명시적으로 바인딩할 수 있습니다.
49
63
50
64
-**예제**:
51
65
52
-
<divclass="options-api">
66
+
<divclass="composition-api">
67
+
68
+
`<script setup>`을 사용하는 컴포넌트에서 이 옵션을 선언해야 할 경우,
69
+
별도의 `<script>` 블록이 필요합니다:
70
+
71
+
</div>
72
+
73
+
<CustomPreferenceSwitch />
74
+
75
+
<divclass="composition-api">
53
76
54
77
```vue
55
78
<script>
56
79
export default {
57
-
inheritAttrs: false,
58
-
props: ['label', 'value'],
59
-
emits: ['input']
80
+
inheritAttrs: false
60
81
}
61
82
</script>
62
83
84
+
<script setup>
85
+
defineProps(['label', 'value'])
86
+
defineEmits(['input'])
87
+
</script>
88
+
63
89
<template>
64
90
<label>
65
91
{{ label }}
@@ -73,22 +99,17 @@ Explicitly declare a display name for the component.
73
99
```
74
100
75
101
</div>
76
-
<divclass="composition-api">
77
-
78
-
When declaring this option in a component that uses `<script setup>`, a separate `<script>` block is necessary:
102
+
<divclass="options-api">
79
103
80
104
```vue
81
105
<script>
82
106
export default {
83
-
inheritAttrs: false
107
+
inheritAttrs: false,
108
+
props: ['label', 'value'],
109
+
emits: ['input']
84
110
}
85
111
</script>
86
112
87
-
<script setup>
88
-
defineProps(['label', 'value'])
89
-
defineEmits(['input'])
90
-
</script>
91
-
92
113
<template>
93
114
<label>
94
115
{{ label }}
@@ -103,11 +124,11 @@ Explicitly declare a display name for the component.
0 commit comments