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
# Built-in Special Attributes {#built-in-special-attributes}
1
+
# سمات مدمجة خاصة {#built-in-special-attributes}
2
2
3
3
## key {#key}
4
4
5
-
The `key`special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.
5
+
السمة الخاصة `key`تُستخدم أساسًا كتلميح لخوارزمية الـDOM الافتراضي في Vue لتحديد العقد الافتراضية عند المطابقة بين قائمة العقد الجديدة والقائمة القديمة.
6
6
7
-
-**Expects:**`number | string | symbol`
7
+
-**تتوقع قيمة من نوع:**`number | string | symbol`
8
8
9
-
-**Details**
9
+
-**التفاصيل**
10
10
11
-
Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.
11
+
بدون مفاتيح، تستخدم Vue خوارزمية تقلل من حركة العناصر وتحاول إصلاح/إعادة استخدام العناصر من نفس النوع في المكان قدر الإمكان. مع المفاتيح، ستعيد ترتيب العناصر بناءً على تغيير ترتيب المفاتيح، وستُزال/تُتلف العناصر التي لم تعد موجودة من الآن فصاعدا.
12
12
13
-
Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.
13
+
يجب أن تحتوي العناصر الأبناء لنفس الأب المشترك على **مفاتيح وحيدة**. ستتسبب المفاتيح المكررة في أخطاء تصييرية.
14
14
15
-
The most common use case is combined with`v-for`:
15
+
حالة الاستخدام الأكثر شيوعًا هي مع`v-for`:
16
16
17
17
```vue-html
18
18
<ul>
19
19
<li v-for="item in items" :key="item.id">...</li>
20
20
</ul>
21
21
```
22
22
23
-
It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:
23
+
يمكن أيضًا استخدامه لإجبار استبدال عنصر/مكون بدلاً من إعادة استخدامه. يمكن أن يكون ذلك مفيدًا عندما تريد:
24
24
25
-
-Properly trigger lifecycle hooks of a component
26
-
-Trigger transitions
25
+
-تشغيل بشكل صحيح خطافات دورة حياة مكون
26
+
-تشغيل الانتقالات
27
27
28
-
For example:
28
+
على سبيل المثال:
29
29
30
30
```vue-html
31
31
<transition>
32
32
<span :key="text">{{ text }}</span>
33
33
</transition>
34
34
```
35
35
36
-
When `text` changes, the `<span>`will always be replaced instead of patched, so a transition will be triggered.
36
+
عندما يتغير `text`، سيستبدل `<span>`دائمًا بدلاً من إصلاحه، لذا سيشغل انتقال.
37
37
38
-
-**See also**[Guide - List Rendering - Maintaining State with`key`](/guide/essentials/list#maintaining-state-with-key)
38
+
-**اطلع أيضًا على**[الدليل - تصيير القوائم - الحفاظ على الحالة مع`key`](/guide/essentials/list#maintaining-state-with-key)
39
39
40
40
## ref {#ref}
41
41
42
-
Denotes a [template ref](/guide/essentials/template-refs).
42
+
يشير إلى [مرجع القالب](/guide/essentials/template-refs).
43
43
44
-
-**Expects:**`string | Function`
44
+
-**تتوقع قيمة من نوع:**`string | Function`
45
45
46
-
-**Details**
46
+
-**التفاصيل**
47
47
48
-
`ref`is used to register a reference to an element or a child component.
48
+
`ref`يستخدم لتسجيل مرجع إلى عنصر أو مكون ابن.
49
49
50
-
In Options API, the reference will be registered under the component's `this.$refs`object:
50
+
في واجهة الخيارات، سيسجل المرجع تحت كائن `this.$refs`للمكون:
51
51
52
52
```vue-html
53
-
<!-- stored as this.$refs.p -->
53
+
<!-- تُخزن كـ this.$refs.p -->
54
54
<p ref="p">hello</p>
55
55
```
56
56
57
-
In Composition API, the reference will be stored in a ref with matching name:
57
+
في الواجهة التركيبية، سيخزن المرجع في ref بالاسم المطابق:
58
58
59
59
```vue
60
60
<script setup>
@@ -64,46 +64,46 @@ Denotes a [template ref](/guide/essentials/template-refs).
64
64
</script>
65
65
66
66
<template>
67
-
<p ref="p">hello</p>
67
+
<p ref="p">السلام عليكم</p>
68
68
</template>
69
69
```
70
70
71
-
If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be the child component instance.
71
+
إذا استخدمت على عنصر DOM عادي، سيكون المرجع هو هذا العنصر؛ إذا استخدمت على مكون ابن، سيكون المرجع هو نسخة المكون الابن.
72
72
73
-
Alternatively `ref` can accept a function value which provides full control over where to store the reference:
73
+
بدلاً من ذلك، يمكن لـ `ref` قبول دالة كقيمة توفر التحكم الكامل في مكان تخزين المرجع:
74
74
75
75
```vue-html
76
76
<ChildComponent :ref="(el) => child = el" />
77
77
```
78
78
79
-
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you must wait until the component is mounted before accessing them.
79
+
ملاحظة مهمة حول توقيت تسجيل المرجع: لأن المراجع تُنشأ بذاتها نتيجة لدالة التصيير، يجب عليك الانتظار حتى يُوصَّل المكون قبل الوصول إليها.
80
80
81
-
`this.$refs`is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
81
+
`this.$refs`أيضًا غير تفاعلي، لذا يجب ألا تحاول استخدامه في القوالب لربط البيانات.
-[الدليل - إضافة الأنواع إلى مراجع القوالب](/guide/typescript/composition-api#typing-template-refs) <supclass="vt-badge ts" />
86
+
-[الدليل - إضافة الأنواع إلى مراجع قوالب المكون](/guide/typescript/composition-api#typing-component-template-refs) <supclass="vt-badge ts" />
87
87
88
88
## is {#is}
89
89
90
-
Used for binding [dynamic components](/guide/essentials/component-basics#dynamic-components).
90
+
يستخدم لربط [المكونات الديناميكية](/guide/essentials/component-basics#dynamic-components).
91
91
92
-
-**Expects:**`string | Component`
92
+
-**يتوقع قيمة من نوع:**`string | Component`
93
93
94
-
-**Usage on native elements** <supclass="vt-badge">3.1+</sup>
94
+
-**الاستخدامعلى العناصر الأصلية** <supclass="vt-badge">3.1+</sup>
95
95
96
-
When the `is`attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.
96
+
عندما تستخدم السمة `is`على عنصر HTML أصلي، ستترجم على أنها [عنصر مدمج مخصص](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)، وهو ميزة أصلية لمنصة الويب.
97
97
98
-
There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [in-DOM Template Parsing Caveats](/guide/essentials/component-basics#in-dom-template-parsing-caveats). You can prefix the value of the `is`attribute with `vue:` so that Vue will render the element as a Vue component instead:
98
+
ومع ذلك، هناك حالة استخدام حيث قد تحتاج Vue إلى استبدال عنصر أصلي بمكون Vue، كما هو موضح في [تنبيهات تحليل القوالب في DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats). يمكنك إضافة بادئة لقيمة السمة `is`بـ `:vue` حتى يقوم Vue بدلاً من ذلك بتصيير العنصر كمكون Vue :
99
99
100
100
```vue-html
101
101
<table>
102
102
<tr is="vue:my-row-component"></tr>
103
103
</table>
104
104
```
105
105
106
-
-**See also**
106
+
-**اطلع أيضًا على**
107
107
108
-
-[Built-in Special Element - `<component>`](/api/built-in-special-elements#component)
0 commit comments