آشنایی با Slotها

Familiarity with Slots

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

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

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

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

<template></template>

<script>
export default {
    
};
</script>

<style>
</style>

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

<template>
  <div>
    <p>A wonderful Quote!</p>
  </div>
</template>

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

<style scoped>
div {
  border: 1px solid #ccc;
  box-shadow: 1px 1px 2px black;
  padding: 30px;
  margin: 30px auto;
  text-align: center;
}
</style>

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

<script>
import Quote from "./components/Quote";
export default {
  components: {
    appQuote: Quote
  }
};
</script>

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

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12"></div>
      <app-quote></app-quote>
    </div>
  </div>
</template>

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

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

      <div class="col-xs-12"></div>
      <app-quote quote="A wonderful quote!"></app-quote>
    </div>

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

<app-quote :quote="'A wonderful quote!'"></app-quote>

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

<script>
export default {
  props: ["quote"]
};
</script>

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

<template>
  <div>
    <p>{{ quote }}</p>
  </div>
</template>

<script>
export default {
  props: ["quote"]
};
</script>

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

<h2>The Quote</h2>
<p>A wonderful quote</p>

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

<div class="row">
    <div class="col-xs-12"></div>
    <app-quote></app-quote>
</div>

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

<template>
  <div>
  </div>
</template>

<script>
export default {
};
</script>

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

      <app-quote>
        <h2>The Quote</h2>
        <p>A wonderful quote</p>
      </app-quote>

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

<template>
  <div>
    <slot></slot>
  </div>
</template>

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

// بقیه کدها //
      <app-quote>
        <h2>The Quote</h2>
        <p>A wonderful quote</p>
      </app-quote>
// بقیه کدها //

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

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

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.