احمد نادری

توسعه دهنده فول استک

author
author

احمد نادری

توسعه دهنده فول استک

چارچوب بندی در vue js

ساخت layout  ها در فریم ورک ویو برای ساختار بندی صفحات مختلف موضوع مهمی هست .

برای این کار یک پوشه به اسم Layouts  میسازیم و داخل اون یک کامپوننت به اسم WebLayouts.vue  .

حالا داخل فایلمون رو به این صورت قرار میدیم :‌

<template>
  <div>
    <header></header>
    <div class="main">
      <slot />
    </div>
    <footer></footer>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
  },
  components: {},
});
</script>

اون قسمت slot  برای فراخوانی بخش های داخلی هست . یعنی ما میایم مثلا بخش های ثابت هدر و فوتر رو اینجا قرار میدیم و بین اون از slot استفاده میکنیم .

حالا تو کامپوننت های دیگه کافیه محتوای خودمون رو بین web-layout ( کامپوننت بالایی قرار بدیم ) . مثلا :

<template>
    <app-layout>
      content main
    </app-layout>
</template>

 

درباره من
  • سلام به وب سایت من خوش اومدید ! از سال 1388 که وارد دنیای برنامه نویسی شدم تجربیات خودم رو از پروژه های مختلف به دست آوردم و همیشه سعی کردم تا مهارت های فنی و رفتاری خودم رو ارتقا بدم تا بتونم برای خودم و سازمانی که در آن کار می کنم بهترین باشم . من عاشق یادگیری هستم و همیشه از چالش های جدید هیجان زده میشم چون اونارو کلید موفقیت و رشد خودم می دونم.
  • @ahmadnaderi01
arrow