Vue3 中 <style scoped> 的作用和用法

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