تنظیم اسکریپت vue3 چیست؟
این یک قند نحوی جدید در Vue 3 است، در مقایسه با رویکرد قبلی، پس از استفاده از آن، نحو سادهتر میشود.
استفاده بسیار ساده است، فقط باید کلمه کلیدی setup را به تگ اسکریپت اضافه کنید. مثلا:
<script setup></script>
ثبت کامپوننت به صورت خودکار
که در script setupکامپوننت های وارد شده را می توان مستقیماً استفاده کرد، نیازی به ثبت نام از طریق آنها ندارید components. علاوه بر این، لازم نیست نام مؤلفه فعلی را مشخص کنید، به طور خودکار از نام فایل به عنوان نام مؤلفه استفاده می کند، به این معنی که دیگر نیازی به نوشتن name ویژگی. مثلا:
/>
>
import Child from './Child.vue'
اگر نیاز به تعریف نام کامپوننت دارید، می توانید نام دیگری را اضافه کنید script تعریف کنید یا از defineOptions استفاده کنید.
استفاده از Core API
استفاده از لوازم جانبی
لوازم فعلی را با definePropsو شی props نمونه کامپوننت را دریافت کنید. مثلا:
>
import { defineProps } from 'vue'
const props = defineProps({
title: String,
})
استفاده از انتشارات
استفاده کنید defineEmit برای تعریف رویدادهایی که مؤلفه ما می تواند منتشر کند، مؤلفه والد می داند چه زمانی باید منتشر کند.
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['change', 'delete'])
</script>
اسلات و آتلیه
میتونی به دستش بیاری slots و attrs از زمینه با استفاده از useContext. با این حال، پس از تصویب رسمی پیشنهاد، این نحو منسوخ شد و به تقسیم شد useAttrs و useSlots. مثلا:
// old
<script setup>
import { useContext } from 'vue'
const { slots, attrs } = useContext()
</script>
// new
<script setup>
import { useAttrs, useSlots } from 'vue'
const attrs = useAttrs()
const slots = useSlots()
</script>
defineExpose API
در رویکرد سنتی، میتوانیم از طریق به محتوای مؤلفههای فرزند در مؤلفه والد دسترسی داشته باشیم ref نمونه، مثال. با این حال، این روش را نمی توان در مورد استفاده قرار داد script setup. setup یک بسته است و جدا از داخلی template هیچ کس نمی تواند به داده ها و روش های داخلی دسترسی داشته باشد.
در صورت نیاز به افشای داده ها و روش ها در setup به صورت خارجی، باید از آن استفاده کنید defineExpose API. مثلا:
<script setup>
import { defineExpose } from 'vue'
const a = 1
const b = 2
defineExpose({
a
})
</script>
بدون نیاز به برگرداندن ویژگی ها و متدها، مستقیماً از آنها استفاده کنید!
این ممکن است یکی از سهولت های اصلی در راه اندازی باشد. در گذشته، هنگام تعریف داده ها و روش ها، همه آنها باید در انتها برگردانده شوند تا در قالب استفاده شوند. که در script setup، خواص و متدهای تعریف شده نیازی به برگرداندن ندارند، می توان مستقیماً از آنها استفاده کرد! مثلا:
<template>
template>
<script setup>
import { ref } from 'vue';
const name = ref('Sam')
script>
