مراجع القالب ​

بينما يخفي نموذج التصيير التصريحي لـ Vue معظم عمليات DOM المباشرة بالنسبة لك، فقد يكون هناك حالات تحتاج فيها إلى الوصول المباشر إلى عناصر DOM الأساسية. للوصول إلى هذا، يمكننا استخدام السمة الخاصة ref :

<input ref="input">

ref هو سمة خاصة، مماثلة لسمة key التي تم مناقشتها في محور v-for. يسمح لنا بالحصول على مرجع مباشر لعنصر DOM محدد أو نسخة مكون ابن بعد وصله. قد يكون هذا مفيدًا عندما تريد، على سبيل المثال، التركيز برمجيًا على عنصر إدخال على مكون موصول بالـDOM أو تهيئة مكتبة طرف ثالث على عنصر معين. ref هو سمة خاصة، مماثلة لسمة key التي تم مناقشتها في محور v-for. يسمح لنا بالحصول على مرجع مباشر لعنصر DOM محدد أو نسخة مكون ابن بعد وصله. قد يكون هذا مفيدًا عندما تريد، على سبيل المثال، التركيز برمجيًا على عنصر إدخال على مكون موصول بالـDOM أو تهيئة مكتبة طرف ثالث على عنصر معين.

الوصول إلى المراجع ​

<script setup>
import { useTemplateRef, onMounted } from 'vue'

// the first argument must match the ref value in the template
const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
// التصريح بمتغير تفاعلي لحفظ مرجع العنصر
// يجب أن يكون الاسم مطابق لقيمة مرجع القالب
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<template>
  <input ref="input" />
</template>

Note that you can only access the ref after the component is mounted. If you try to access $refs.inputinput in a template expression, it will be undefinednull on the first render. This is because the element doesn't exist until after the first render!

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // غير موصول بعد، أو العنصر أزيل (على سبيل المثال ،بواسطة  v-if)
  }
})

المراجع داخل حلقات v-for ​

Requires v3.5 or above

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = useTemplateRef('items')

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: [
        /* ... */
      ]
    }
  },
  mounted() {
    console.log(this.$refs.items)
  }
}
</script>

<template>
  <ul>
    <li v-for="item in list" ref="items">
      {{ item }}
    </li>
  </ul>
</template>

تجب الإشارة إلى أن مرجع المصفوفة لا يضمن نفس الترتيب الذي تحتوي عليه المصفوفة المصدرية.

المراجع المُنشأة بالدوال ​

بدلاً من القيمة النصية، يمكن أيضاً ربط السمة ref بدالة، والتي ستُستدعى في كل تحديث للمكون وتُعطيك الحرية الكاملة في مكان تخزين مرجع العنصر. تستقبل الدالة مرجع العنصر كأول وسيط :

<input :ref="(el) => { /* انسب el  إلى متغير تفاعلي أو خاصية */ }">

تجدر الإشارة إلى أننا نستخدم ربط ديناميكي :ref لذا نستطيع تمرير دالة بدلاً من سلسلة نصية تحتوي على اسم المرجع. عند فصل العنصر، سيكون الوسيط null. بالطبع، يمكنك استخدام تابع/دالة بدلاً من دالة سطرية.

مرجع على مكون ​

هذا القسم يفترض معرفتك بـالمكونات. يمكنك تخطيه والعودة إليه لاحقاً.

ref يمكن أيضاً استخدامه على مكون ابن. في هذه الحالة، سيكون المرجع على نسخة مكون :

<script setup>
import { useTemplateRef, onMounted } from 'vue'
import Child from './Child.vue'

const childRef = useTemplateRef('child')

onMounted(() => {
  // childRef.value will hold an instance of <Child />
})
</script>

<template>
  <Child ref="child" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // سيحتوي  child.value  على نسخة من  <Child />
})
</script>

<template>
  <Child ref="child" />
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  mounted() {
    // this.$refs.child سيحتوي على نسخة من  <Child />
  }
}
</script>

<template>
  <Child ref="child" />
</template>

إذا كان المكون الابن يستخدم واجهة الخيارات أو لا يستخدم <script setup>، سيكون المرجع المستخدم مطابقاً لـسيكون المرجع المستخدم مطابقاً لـ this للمكون الابن، مما يعني أن المكون الأب سيكون لديه الوصول الكامل إلى كل خاصيات ودوال المكون الابن. هذا يجعل من السهل إنشاء ارتباطات قوبة بين المكون الأب والابن، لذا يجب استخدام مراجع المكونات فقط عند الحاجة القصوى - في معظم الحالات، يجب عليك محاولة تنفيذ التفاعلات بين المكون الأب والابن باستخدام واجهة الخاصيات وإرسال الأحداث القياسية أولاً.

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

//لا تحتاج التعليمات العامة للمصرف  مثل  defineExpose لأن تكون مستوردة
defineExpose({
  a,
  b
})
</script>

export default {
  expose: ['publicData', 'publicMethod'],
  data() {
    return {
      publicData: 'foo',
      privateData: 'bar'
    }
  },
  methods: {
    publicMethod() {
      /* ... */
    },
    privateMethod() {
      /* ... */
    }
  }
}