Vue中避免样式冲突 scoped 属性的方法

scoped 属性的作用是：让样式在局部生效，避免冲突。

引出组件样式冲突的问题：

首先创建 Add.vue 和 Edit.vue 两个组件，分别定义相同的 class 名 添加不同的样式。

<template>
    <div>
        <h1 class="box">添加</h1>
    </div>
</template>

<script>
export default {
    name: "Add"
}
</script>

<style>
.box {
    background-color: aqua;
}
</style>

<template>
    <div>
        <h1 class="box">编辑</h1>
    </div>
</template>

<script>
export default {
    name: "Edit"
}
</script>

<style>
.box {
    background-color: red;
}
</style>

然后在 Home.vue 页面引入这两个组件。

<template>
    <div>
        <Add></Add>
        <Edit></Edit>
    </div>
</template>