استایل Scoped (Scoped Styling)
«استایل Scoped (Scoped Styling)» یعنی استایل فقط روی همان کامپوننت اثر دارد. اگر scoped نزنیم، استایل داخل تگ <style> جهانی می شود. پس برای جداسازی، از <style scoped> استفاده کن.
1) استایل سراسری بدون scoped
استایل داخل هر فایل *.vue اگر scoped نباشد، روی همه کامپوننت ها اثر می گذارد. مثل برچسبی که به همه می چسبد.
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script><\/script>
<style>
p {
background-color: pink;
width: 150px;
}
</style>
2) استایل محلی با scoped
برای محدودکردن اثر استایل، ویژگی scoped را به تگ <style> بده. حالا استایل فقط روی عناصر همین کامپوننت می نشیند.
<template>
<p>This p-tag belongs to 'CompOne.vue'</p>
</template>
<script><\/script>
<style scoped>
p {
background-color: pink;
width: 150px;
}
</style>
جمع بندی سریع
- بدون scoped، استایل ها جهانی می شوند.
- با scoped، استایل فقط محلی می ماند.
- همیشه جای استایل را آگاهانه انتخاب کن.
- scoped به جلوگیری از تداخل کمک می کند.