جلسه نوزدهم آموزش فریم ورک vue.js : آشنایی با slot ها در vue.js

آشنایی با slot ها در vue.js

در جلسه گذشته در مورد bus event ها و نحوه اتصال کامپوننت های فرزند به هم توضیح دادیم در این جلسه به آشنایی با slot ها در vue.js  می پردازیم.

slot  ( اسلات ) چیست ؟

vue.js از اسلات ها به عنوان یک رسانه توزیع محتوا استفاده میکند، در واقع برای ارسال data در کامپوننت ها مورد استفاده  قرار میگیرد.

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

(البته نه لینک ساده، چون لینک ساده را میتوان داخل data تعریف کرد و در کامپوننت نمایش داد)

اسلات ها یکسری مقادیر ورودی که به کامپوننت ارسال میشود را در خودشون نگه میدارند و از آنها استفاده میکنند.

1- می آییم دو تا کامپوننت تحت عنوان component1 و component2 را ایجاد میکنیم و تگ ها را میسازیم و…
2- حالا میخواهیم که data ای را به کامپوننتمون ارسال کنیم، برای اینکار از تگی بنام slot استفاده میکنیم

به مثال زیر توجه کنید:

App.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="bordered">
          <h1>{{ msg }}</h1>
          
            <app-component-1>
                  <h2>{{title1}}</h2>
            </app-component-1 >
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Component1 from "./components/Component1";
export default {
  data() {
    return {
      msg: "this is the main component",
      title1: "title for component 1",
    };
  },
  components: {
    "app-component-1": Component1,
  }
};
</script>

<style scoped>
.bordered {
  border: 2px solid red;
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  background-color: lightgray;
}
</style>

Component1

<template>
  <div class="alert alert-danger">
    <h1>{{ title }}</h1>
    <hr>
    <slot></slot>
  </div>
</template>

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

در بالا همانطور که مشاهده میکنید هر چیزی که داخل title1 داخل کامپوننت اصلی نوشته میشه ، میاد و داخل component1 نیز داخل slot نمایش داده می شود و به این ترتیب data ای را به آن ارسال کردیم.
الان هر چیزی که داخل تگ app-component-1 به صورت html بنویسیم میاد و داخل component1 داخل slot نمایش داده می شود.

3- حالا فرض کنید مقادیری که داخل تگ کامپوننت ارسال میکنیم را میخواهیم داخل کامپوننت 1 به صورت جداگانه دریافت کنیم

(یعنی داخل اسلات های جداگانه)

مثلا : یک پاراگراف داریم و یک h1 محتواهاشون را میخواهیم به صورت جداگانه دریافت کنیم

تعریف چندین slot

نکته : ما میتوانیم چندین slot داشته باشیم که هر کدام به نام خاصی برگردند.

مثال :

App.vue:

<div slot="header">
  <h2>{{title1}}</h2>
  <p>{{title1}}</p>
</div>
<p slot="paragraph">test</p>

Component1

<slot name="paragraph"></slot>
<slot name="header"></slot>

در بالا در اسلات با نام پاراگراف، test را میبینیم و در اسلات با نام هدر title1 را مشاهده می کنیم.
امکان جابه جایی اسلات ها وجود دارد و هرجایی بخواهیم میتوانیم انها را استفاده کنیم.

تعریف مقدار اولیه برای slot ها

نکته : میتوانیم برای اسلات ها مقدار اولیه تعریف کنیم.
مثلا اسلاتی در کامپوننت اول داریم بنام footer که در App.vue چنین نامی تعریف نشده ، کافیه در کامپوننت اول به شکل زیر برای اسلات مقدار اولیه تعریف کنیم.

<slot name="footer">
  <h3>this is default value for footer</h3>
</slot>

حالا اگر بیایم و در App.vue یک div با اسلات فوتر تعریف کنیم و داخلش را خالی بگذاریم، در خروجی دیگر چیزی مشاهده نخواهیم کرد، چرا که هر چیزی که داخل این div وجود داشته باشه در خروجی جایگزین مقدار default اسلات داخل کامپوننت قرار میگیرد،
مثل :

App.vue

<div slot="footer"></div>

در مثال زیر هم مقدار داخل اسلات فوتر جایگزین می شود

<div slot="footer">
  <h3>sent footer</h3>
</div>

نکته : در import کردن فایل کامپوننت ها اگر پسوند فایل رو هم نگذاریم باز هم تشخیص میده و مشکلی پیش نمیاد.

 

برچسب‌ها:

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید