vue3中的style scoped是神么意思

<p>在 Vue3 中，<style scoped> 表示该样式仅在当前组件中生效，不会影响到父组件和子组件。这是通过将样式中的类名和 ID 自动添加一个唯一的前缀来实现的，从而避免了全局样式的污染。例如：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class=&quot;example&quot;&gt;
    &lt;h1&gt;Example Component&lt;/h1&gt;
    &lt;p&gt;This is an example component with scoped styles.&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style scoped&gt;
.example h1 {
  color: red;
}
.example p {
  font-size: 16px;
}
&lt;/style&gt;
</code></pre>
<p>在上面的例子中，该组件中的样式只会应用于包含 <div class="example"> 的元素，不会影响到其他组件。</p>