חידת Vue - איך עובד Scoped Style

29/01/2025
vue

פוסט זה כולל טיפ קצר לעבודה עם Vue. אם אתם רוצים ללמוד איתי Vue מההתחלה ובצורה מקצועית תשמחו לשמוע שבניתי קורס מלא הכולל עשרות שיעורי וידאו והמון תרגול בו לומדים ויו מההתחלה ועד לנושאים המתקדמים.
לפרטים נוספים והרשמה בקרו בדף קורס Vue.JS כאן באתר.
 

נכתוב את הקוד הבא בקומפוננטת App.vue:

<script setup>
import Child from './Child.vue';
</script>

<template>
  <p class="red">Hello World from App</p>
  <Child />
</template>

<style scoped>
.red {
  color: red;
}
</style>

וזה Child.vue:

<script setup></script>

<template>
  <button class="red">
    Hello World from Child
  </button>
</template>

אפשר לראות את הדוגמה לייב בקישור הזה: https://tinyurl.com/4nff62kp

עכשיו לשאלות - למה הטקסט בכפתור מופיע באדום? ואיך אפשר "לנתק" אותו מהעיצוב של App כדי שלא יקבל את הגדרת האדום משם?

שימו לב שהגדרות העיצוב הן בבלוק styled scoped ושזו לא הבעיה שמתוארת כאן: https://www.tocode.co.il/blog/2021-10-watch-out-inherited-css, למרות שגם הבעיה בפוסט ההוא מעניינת.