在使用Vue.js开发组件时，可以通过给<style>标签添加scoped属性来实现样式的局部作用域。这样做可以防止样式泄漏到其他地方，减少样式冲突。
为了实现样式的局部作用域，Vue会给DOM中所有的元素添加一个独特的数据属性，比如data-v-x，其中x是一个唯一的标识符。这个属性会被用作CSS选择器的一部分，确保只有被scoped样式所影响的元素会被应用上相应的样式。
以下是一个简单的Vue组件示例，展示了如何使用scoped样式：
<template>
<div class="example">
<p>This paragraph will be green.</p>
<p>This paragraph will be red.</p>
</div>
</template>
<script>
export default {
// ...
}
</script>
<style scoped>
.example p:first-child {
color: green;
}
.example p:last-child {
color: red;
}
</style>在这个例子中，虽然两个<p>标签都有.example类，但由于style标签包含了scoped属性，所以只有被scoped样式所影响的元素会被应用上相应的样式。即第一个<p>标签会变绿色，第二个<p>标签会变红色。
注意，虽然scoped样式可以防止样式泄漏，但它也有一些限制，例如无法外部给子组件中的DOM添加样式，因为这些样式选择器都会被特别处理，只适用于组件内部。