چارچوب بندی در 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>