آشنایی با Slotها

Familiarity with Slots

0
82
Vue.JS 2: آشنایی با slot ها - قسمت 38

در این قسمت یک پروژه جدید برایتان آماده کرده ام که از بوت استرپ استفاده می کند. شما می توانید آن را از این لینک دانلود کنید. از این جلسه به بعد می خواهم در مورد ویژگی های پیشرفته تر کامپوننت ها صحبت کنم به همین دلیل است که یک پروژه جداگانه برای آن در نظر گرفته ام.

در این جلسه به دو قابلیت پیشرفته کامپوننت ها می پردازیم. فایل پروژه ای که به شما دادم را دانلود کرده و آن را باز کنید. وارد پوشه src شده و یک پوشه دیگر به نام components ایجاد کنید که دارای فایلی به نام Quote.vu باشد. Quote به معنی «نقل قول» یا بعضا «جملات قصار» است.

مثل همیشه ساختار اولیه فایل ما (Quote.vue) به صورت زیر است:

حالا یک تگ ساده <p> را تعریف می کنیم که درون خود عبارت A wonderful quote را داشته باشد:

حالا می خواهم استایل هایی را به این <template> بدهم بنابراین وارد قسمت <style> می شوم و خصوصیت scoped را به آن می دهم تا استایل هایش فقط روی این کامپوننت اعمال شوند. حالا می گوییم:

حالا وارد فایل App.vue در این پروژه شده و کامپوننت Quote.vue را در آن وارد کنید:

همانطور که می بینید من کامپوننت Quote را درون کامپوننت App به صورت محلی (local) ثبت کرده ام. در جلسات قبل توضیح داده بودم که با این روش می توانیم کامپوننت ها را به صورت محلی ثبت کنیم. با این کار Quote درون کامپوننت App در دسترس خواهد بود. اگر آن را به صورت سراسری (global) ثبت می کردیم، در تمام فایل های کل پروژه در دسترس بود. حالا می توانم در فایل App.vue و در قسمت Template از Quote استفاده کنم:

امیدوارم از جلسات قبل به یاد داشته باشید که ثبت کردن appQuote و استفاده از آن به صورت app-quote هیچ اشکالی ندارد و Vue به صورت خودکار متوجه می شود به جای حروف بزرگ علامت خط فاصله قرار بدهد. حالا اگر دستور npm run dev را در حالت اجرا داشته باشید و به مرورگر بروید، یک صفحه ساده را می بینید که می گوید A wonderful Quote.

حالا می خواهم مقدار داخل این کامپوننت را که فعلا A wonderful quote است را از کامپوننت پدر (App.vue) تعیین کنم. ما می دانیم که این کار با props شدنی است بنابراین همین کار را انجام می دهیم و در فایل App.vue می گوییم:

اگر یادتان باشد به شما گفته بودم که اگر props را به همراه v-bind (علامت اختصاری 🙂 ارسال نکنید، مقدار داخل آن پویا نخواهد بود بلکه واقعا رشته داخل آن ارسال می شود. من از عمد این کار را کرده ام چرا که می خواهم واقعا رشته A wonderful quote برای کامپوننت Quote ارسال شود نه اینکه کدهایی برای اجرا باشند (مثل متد و غیره). راه دیگر پاس دادن رشته این است که از v-bind استفاده کنیم اما مقدار آن را درون single quotation قرار بدهیم:

در کد بالا توجه کنید که مقدار درون double quote ها با single quote نیز احاطه شده اند! من از همان روش اول استفاده می کنم چرا که ساده تر است. حالا می توانیم وارد فایل Quote.vue شده و این prop را در آن دریافت کنیم:

حالا که آن را دریافت کرده ایم می توانیم مقدارش را درون Template ها به جای رشته خودمان نمایش بدهیم:

کد بالا به راحتی اجرا می شود و مشکلی نخواهیم داشت. حالا تصور کنید که بخواهیم کدهای HTML را به همراه این نوشته از طریق این props ارسال کنیم. در این حالت باید چه کار کنیم؟ مثلا فرض کنید quote ما دارای یک h2 و یک p باشد:

اگر بخواهیم این را به صورت عادی به prop خود بدهیم باید ابتدا آن را تبدیل به رشته کنیم و سپس از همان مباحث جلسات اول این دوره آموزشی استفاده کنیم که خیلی کار جالبی نیست. من می خواهم از روش بهتری استفاده کنم. ابتدا prop خود را حذف کنید (در فایل App.vue):

حالا به فایل Quote.vue رفته و prop را از آنجا نیز حذف کنید:

من دوست دارم بتوانم کدهای خود را بدین شکل پاس بدهم:

یعنی کدهای HTML را درون کامپوننت app-quote قرار بدهم و سپس app-quote آن ها را دریافت کند. فریم ورک Vue قابلیتی به نام slots دارد که به وسیله آن می توانیم این کار را انجام بدهیم. برای استفاده از slot ها باید در کامپوننت فرزند باشیم (جایی که قرار است داده ها را دریافت کنیم – Quote.vue) و سپس در قسمت مورد نظر، از کامپوننت خاصی به نام slot استفاده کنیم:

این کامپوننت یک کامپوننت رزرو شده است بنابراین نمی توانیم نام کامپوننت های دیگر خود را slot بگذارید. حالا در فایل App.vue نیز می گوییم:

حالا کامپوننت ما به راحتی کار می کند (می توانید آن را در مرورگر تست کنید):

نتیجه ی کد های ما بدین شکل است
نتیجه کدهای ما بدین شکل است
ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید