روش استفاده از slot ها در Vue js

روش استفاده از slot ها در Vue js

در این مقاله قصد داریم شما را با طریقه کار کردن slot ها آشنا کنیم. slot در واقع یک attribute است که در کامپوننت پدر (parent) به کار برده می شود و به تگ slot استفاده شده در کامپوننت بچه (child) اشاره دارد.

برای شروع بهتر است یک پروژه vue js جدید بسازید و مراحلی که گفته می شود را به ترتیب انجام دهید.

ما در این مقاله قصد داریم یک صفحه login برای کاربر بسازیم (البته مباحث جاوااسکریپتی آن مورد بررسی قرار نمی گیرد و صرفاً طراحی آن مورد نظر است). این صفحه شامل یک عنوان در بالای آن  و دو ورودی (input) برای نوشتن نام کاربری و رمز عبور و یک بخش هم برای قرار دادن دکمه ورود است. در اینجا قصد داریم یک کامپوننت برای ورودی ها بسازیم و از این کامپوننت برای دو ورودی نام کاربری و رمز عبور استفاده کنیم.

این کامپوننت جدید را با عنوان ‘LoginInput’ نامگذاری می کنیم و فعلاً درون آن را با کد زیر پر کنید:

<template>
  <div class="login-input">
    <div>
      <input type="text" />
      <span> :نام کاربری</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'login-input',
};
</script>

این کامپوننت را در فایل app.vue، مانند زیر import کنید.

<template>
  <div id="app">
    <h2>ورود به سایت</h2>
    <login-input></login-input>
  </div>
</template>

<script>
import LoginInput from './components/LoginInput.vue';

export default {
  name: 'App',
  components: {
    'login-input': LoginInput,
  },
};
</script>

حالا بقیه صفحه login را در فایل app.vue مانند کدهای زیر تکمیل می کنیم:

<template>
  <div id="app">
    <h2>ورود به سایت</h2>
    <login-input></login-input> <br />
    <login-input></login-input> <br />
    <button type="submit">ورود</button>
  </div>
</template>

خروجی کدهای نوشته شده تا حالا به صورت زیر است:

login form

اگر دقت کنید، می بینید که نام کاربری دو بار استفاده شده است، در حالی که ورودی دوم باید رمز عبور باشد. برای رفع این مشکل دو راه وجود دارد:

  1. ساخت یک کامپوننت جدید برای رمز عبور (که کار اضافه ای محسوب می شود و استاندارد نیست).
  2. اعمال تغییراتی در کامپوننت LoginInput به طوری که بتوان از این کامپوننت برای هر دو ورودی استفاده کرد.

ما قصد داریم از روش دوم برای رفع این مشکل استفاده کنیم. برای اعمال تغییرات در کامپوننت LoginInput از slot ها استفاده می کنیم.

قبل از شروع کار با slot ها، چند کار را با هم انجام می دهیم تا ذهن شما آماده تر شود. 

به نظر شما اگر درون <login-input></login-input>، متنی نوشته شود آیا در مرورگر نمایش داده می شود؟!!!

به دقت به کد زیر و خروجی آن نگاه کنید. 

<template>
  <div id="app">
    <h2>ورود به سایت</h2>
    <login-input>نام کاربری جدید</login-input> <br />
    <login-input>رمز عبور جدید</login-input> <br />
    <button type="submit">ورود</button>
  </div>
</template>

خروجی کد بالا:

login form

همانطور که می بینید خروجی نشان داده شده نسبت به قبل هیچ گونه تغییری نکرده است. برای اینکه بتوانید تغییرات اعمال شده را ببینید، می توانید از تگ </slot> درون کامپوننت LoginInput (مانند کد زیر) استفاده کنید.

<template>
  <div class="login-input">
    <div>
      <input type="text" />
      <span> :نام کاربری</span>
    </div>
    <slot/>
  </div>
</template>

</slot> را می توان هر جایی از کامپوننت LoginInput استفاده کرد و در هنگام استفاده از کامپوننت LoginInput، هر چیزی که درون تگ <login-input></login-input> قرار گیرد در محل قرارگیری همان </slot> ظاهر می شود. حالا اگر خروجی را دوباره نگاه کنید، خواهید دید که تغییرات جدید قابل مشاهده هستند.

خوب حالا با توجه به مطالب بیان شده درباره slot ها، می خواهیم ورودی دوم نام کاربری را به رمز عبور تغییر دهیم. به عبارتی قصد داریم با استفاده از slot ها، کامپوننت LoginInput را به یک کامپوننت داینامیک تبدیل کنیم که بتوان از آن در هر جایی استفاده کرد. برای انجام  این کار کافی است که اسم ورودی را مانند کد زیر داخل slot تعریف کنیم. 

<template>
  <div class="login-input">
    <input type="text" />
    <slot />
  </div>
</template>

و درون فایل app.vue کافی است مانند زیر عمل کرد:

<template>
  <div id="app">
    <h2>ورود به سایت</h2>
    <login-input>نام کاربری </login-input> <br />
    <login-input>رمز عبور </login-input> <br />
    <button type="submit">ورود</button>
  </div>
</template>

اما الان یک سوال پیش می آید که اگر به غیر از اسم ورودی (برای مثال "رمز عبور")، بخواهیم اطلاعات دیگری را نیز تغییر دهیم یا در یک کامپوننت آن تغییرات را داشته باشیم و در یک کامپوننت دیگر تغییرات دیگری داشته باشیم باید چکار کرد؟ مثلاً فرض کنید که بخواهیم مانند تصویر زیر، در انتهای ورودی، از یک اسم یا عبارت استفاده کنید. 

input of form

در این صورت دیگر نمی توان از روش قبلی به تنهایی استفاده کرد بلکه هر کدام از slot های استفاده شده باید دارای یک مشخصه باشند تا بتوان هر کدام از تغییرات را در محل دلخواه اعمال کرد.

هر slot باید دارای یک اسم خاص باشد. در صورتی که برای هر slot یک اسم انتخاب شود به راحتی میتوان تغییرات جدید را روی کامپوننت LoginInput اعمال کرد. برای تغییر اسم هر ورودی نیز از همین روش مطابق کدهای زیر استفاده می شود.

کامپوننت LoginInput:

<template>
  <div class="login-input">
    <input type="text" />
    <slot name="inputName" />
  </div>
</template>

فایل app.vue:

<template>
  <div id="app">
    <h2>ورود به سایت</h2>
    <login-input>
      <span slot="inputName">نام کاربری</span>
    </login-input> <br />
    <login-input>
      <span slot="inputName">رمز عبور</span>
    </login-input> <br />
    <button type="submit">ورود</button>
  </div>
</template>

فرض کنید که نمی خواهیم درون فایل app.vue از هیچ slot ی استفاده کنیم و فقط از یک مقدار پیش فرض آن استفاده کنیم. در این صورت، برای تعریف کردن مقدار پیش فرض slot کافی است مانند زیر عمل کنید.

در کدهای زیر مقدار پیش فرض برای اسم ورودی عبارت "نام کاربری" در نظر گرفته شده است که در کامپوننت LoginInput مانند زیر نوشته می شود:

<template>
  <div class="login-input">
    <input type="text" />
    <slot name="inputName">نام کاربری</slot>
  </div>
</template>

در این صورت، اگر در فایل  app.vue برای slot چیزی نوشته نشود، به صورت پیش فرض به جای آن عبارت "نام کاربری" در نظر گرفته می شود.

فرض کنید در فایل app.vue ورودی اول ("نام کاربری") مانند زیر نوشته شود در این صورت فکر می کنید خروجی به چه شکلی خواهد بود.

<login-input></login-input>

درست حدس زدید، خروجی به صورت زیر خواهد بود.

login form

این مقاله هم به پایان رسید، اما مجموعه آموزش های Vuejs همچنان ادامه خواهند داشت.

دوره در حال تکمیل است ... rocket
کاربر میهمان

دوست گرامی شما به عنوان کاربر میهمان در سایت سکان آکادمی حضور دارید لطفاً برای ارسال دیدگاه ابتدا وارد حساب خود شوید