18-组件样式

我就是我 2023-10-08 18:07 23阅读 0赞

## **组件样式** ##

#### 一、组件中样式的冲突 ####

组件中定义的样式，默认是全局都有效的，vue最终会把这些样式汇总到一起。

组件的样式最终汇总出来的顺序，取决于在父组件中引入的顺序。

例如：School中定义的样式：

<template>
      <div class="demo">
          <h2>学校名称：{
       {name}}</h2>
          <h2>学校地址：{
       {address}}</h2>
          <br>
      </div>
    </template>
    
    <style>
        .demo {
            background-color: skyblue;
        }
    </style>

在Student.vue中定义的样式：

<template>
      <div class='demo'>
          <h2>学生姓名：{
       {name}}</h2>
          <h2>学生性别：{
       {sex}}</h2>
      </div>
    </template>
    
    <style>
        .demo {
            background-color: orange;
        }
    </style>

如果在App组件中同时引入了School、Student两个组件，则这两个组件的样式都会被引入。因为这两个组件的模板class都叫demo，就会产生冲突。

模板最终使用的background-color取决于哪个组件在App中最后被引入：

import Student from './components/Student'
    
    // 先引入Student,然后引入School，则最后的background-color使用的是School中的样式
    import School from './components/School'

如果改为先引入School再引入Student，样式就会使用Student定义的样式：

import School from './components/School' 
    // 最后引入Student组件，则最后冲突的样式使用的是Student的样式
    import Student from './components/Student'

#### 二、 限制样式作用域 ####

使用`scoped`属性限制该样式只对当前组件有效：

<style scoped>
        .demo {
        
            background-color: orange;
        }
    </style>

实现原理：Vue会给该组件添加一个`data-v-随机数`的属性，然后在样式上也添加该属性的筛选：

`.data[data-v-xxxxxx]`。这样这个样式就只会对这个组件有效了。

加了`scoped`之后，这个样式只会对当前组件有效，对当前组件引入的子组件无效。

#### 三、使用预编译语言编写样式 ####

可以使用`<style>`的`lang`属性声明该样式使用的语言。

例如：

<style lang='css'></style>

如果要使用 less 编写样式，则需要设置：（不配置时，默认使用的css）

除此之外，还需要安装 less-loader：

最新版的less-loader只支持webpack5，但是目前Vue脚手架中引入的webpack是4.46版，所以不能直接下载最新版的less-load，需要加上版本限制。

# 查看webpack的所有版本
    npm view webpack versions
    
    # 查看less-loader的所有版本
    npm view less-loader versions
    
    # 限制安装的less-load版本为7.x
    npm i less-loader@7

如果报错缺少less，则需再安装less：

npm i less

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**