scoped样式冲突&data

vue2
1.1k 词
scoped样式冲突&data

scoped样式冲突&data#

组件的三大组成部分#

注意点说明

  1. 结构 <template>

    只能有一个根元素

  2. 样式 <style>

    全局样式（默认）：影响所有组件

    局部样式： scoped 下的样式，只作用于当前组件

  3. 逻辑/行为 <script>

    el 是根实例独有的，在组件中不用写，而组件中的 data 是一个函数 ，其他配置项一致

组件的样式冲突#

默认情况：写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题

  1. 全局样式：默认组件中的样式会作用到全局
  2. 局部样式：可以给组件加上 scoped 属性，可以让样式 只作用于当前组件

实测样式冲突#

准备两个组件BaseOne、BaseTwo

两个组件结构一致，在 BaseOne.vue 中为div设置边框及外边距 

<!-- BaseOne.vue -->
<template>
    <div>BaseOne</div>
</template>
<!-- App.vue -->
<template>
    <div class="App">
        <BaseOne></BaseOne>
        <BaseTwo></BaseTwo>
    </div>
</template>
<style lang="less">
div {
    margin: 20px;
    border: 1px solid blue;
}
</style>

结果：BaseOne.vue中div上的样式作用到了全局的div

scoped解决样式冲突#

只需为 style 标签添加 scoped 属性 

<style lang="less" scoped>
div {
    margin: 20px;
    border: 1px solid blue;
}
</style>

通常希望组件都有独立的样式，所以建议加上 scoped

scoped原理#

  1. 使用 scoped 后会给当前组件模板的 所有 元素，都添加上一个自定义属性： data-v-hash值
  2. css选择器后面被自动处理，添加上了属性选择器

data是一个函数#

一个组件的 data 选项必须是一个 函数 ，以保证每个组件实例，维护独立的一份数据对象

每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象

若按原来data为对象的写法，多次使用的组件就会使用同一套数据，比如两个商品组件使用同一组数据，这显然不合理

而data作为函数将对象作为返回值，每个组件初始化后就可以得到相同结构但数据不相互影响的一个对象

实测数据独立#

准备一个计数器组件BaseCount.vue

<!-- BaseCount.vue -->
<template>
    <div class="base-count">
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div>
</template>
<script>
export default {
    // data必须是一个函数，保证每个组件实例，维护独立的数据对象
    data() {
        return {
            count: 100,
        };
    },
};
</script>
<style lang="less">
.base-count {
    margin: 20px;
}
</style>
<!-- App.vue -->
<template>
    <div class="App">
        <BaseCount></BaseCount>
        <BaseCount></BaseCount>
        <BaseCount></BaseCount>
    </div>
</template>
<script>
import BaseCount from './components/BaseCount.vue';
export default {
    components: {
        BaseCount,
    },
};
</script>

App.vue中初始化了三个计数器组件

从实际使用中可以看见，每个组件所使用的数据都是独立的