Vue.js では、scopedこれはスタイルの修飾子であり、親コンポーネントや子コンポーネントのスタイルに影響を与えることなく、現在のコンポーネントのスコープ内でのみスタイルが有効になるようにスタイルのスコープを制限するために使用されます。この機能は通常、CSS スタイル汚染の問題を解決するために使用され、スタイルが現在のコンポーネントの DOM 要素にのみ影響するようにします。
Scoped スタイルの基本的な使用法
Vue コンポーネント の<style>タグの属性を使用するとscoped、スタイルを現在のコンポーネントのスコープに制限できます。サンプルコードは次のとおりです。
<template>
<div class="app">
<h1>Vue Scoped Styles</h1>
<button @click="toggleColor">Toggle Color</button>
<p class="global-style">大家好，我是IT小辉同学！！！</p>
<p class="scoped-style">希望与大家一起学习，成长！！！</p>
</div>
</template>
<script>
export default {
data() {
return {
isRed: false,
};
},
methods: {
toggleColor() {
this.isRed = !this.isRed;
},
},
};
</script>
<style scoped>
/* Scoped styles */
p {
color: blue;
}
/* Global styles */
.global-style {
font-weight: bold;
}
/* Conditional styling */
.scoped-style {
color: red;
}
</style>
上記の例では、<style scoped>タグ内のスタイルは現在のコンポーネント内の要素にのみ適用され<p>、他のコンポーネント内のグローバル スタイルや要素には影響しません。
例 1: 条件付きスタイル バインディング
<template>
<div>
<p :class="{ 'red-text': isRed }">热爱，就要坚持，勇往直前！！！</p>
<button @click="toggleColor">相信梦想！！！</button>
</div>
</template>
<script>
export default {
data() {
return {
isRed: false,
};
},
methods: {
toggleColor() {
this.isRed = !this.isRed;
},
},
};
</script>
<style scoped>
.red-text {
color: red;
}
</style>
上の例では、<p>要素のスタイルはisRed変数の値に基づいて変化します。<p>このスタイルは現在のコンポーネントの要素にのみ影響し、他のコンポーネントには影響しません。
例 2: コンポーネントのネスト
<template>
<div>
<h2>把我的故事讲给你听。。。。。。</h2>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
<style scoped>
h2 {
color: blue;
}
</style>
この例では、親コンポーネントのスタイルは親コンポーネント内の要素にのみ影響し、ChildComponent子コンポーネント内の要素には影響しません。
例 3: 深度セレクター
Vue では、::v-deepまたは/deep/疑似クラスを使用して、子コンポーネントのスタイルに影響を与えることもできます。以下に例を示します。
<template>
<div>
<h2>希望我们都能够勇敢一些。。。。。。</h2>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
};
</script>
<style scoped>
::v-deep h2 {
color: blue;
}
</style>
これは、子コンポーネントChildComponent内の<h2>要素のスタイルに影響します。
上記の例は、その使用方法scopedとその機能を理解するのに役立つように非常に詳細に説明されています。scopedスタイルは、コンポーネント スタイルを分離するための Vue.js の非常に便利な機能で、コンポーネント スタイルがグローバル スタイルや他のコンポーネントに影響を与えないようにし、コードの保守性と再利用性を向上させます。頻繁に使用して、さらに詳しく知っていただければ幸いです。！！