חידת Vue - איך עובד Scoped Style
29/01/2025
נכתוב את הקוד הבא בקומפוננטת 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, למרות שגם הבעיה בפוסט ההוא מעניינת.