vue组件样式

约定不等于承诺〃 2021-12-12 00:19 379阅读 0赞

### 背景 ###

使用嵌套组件时，样式往往会覆盖，即子组件的样式会覆盖App.vue的样式

比如App.vue的h1标签的颜色是红色，User.vue的h1是绿色，但运行时，都变成了绿色

![20190709210834582.png][]

怎样使组件的样式只作用于本组件那

### 方法 ###

**在style标签中添加scoped**

Users.vue

<template>
      <div class="users">
        <h1>子组件样式</h1>
      </div>
    
    </template>
    <script>
      export default{
        name:"users",
        data(){
          return{
            names:["beiqiu","sakura"]
          }
        }
      }
    </script>
    
    <style scoped>
      h1{
        color:green;
      }
    </style>

App.vue

<template>
      <div id="app">
        <h1>根组件样式</h1>
        <Users></Users>
      </div>
    </template>
    
    <script>
      import Users from './components/Users'
    
      export default {
    
        components:{
          Users
        }
      }
    
    </script>
    
    <style scoped>
      h1{
        color:red;
      }
    </style>

**结果**

![20190709211350852.png][]

[20190709210834582.png]: /images/20211211/d991ddf90d474ad98e73bf12b106d0e0.png
[20190709211350852.png]: /images/20211211/a30a306b7fd648dba8a45bff9fcbb8c0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，379人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue sass 组件样式穿透

vue中经常引入第三方组件，而第三方组件有时会无法满足需求，这时就需要自定义组件样式第一种方式，直接在全局样式修改，这种方式会全局覆盖修改后的组件样式 <sty

淡淡的烟草味﹌/ 2022年09月11日 13:22/ 0 赞/ 244 阅读

相关【vue】vue组件循环获取样式

vue中组件循环获取样式场景： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

墨蓝/ 2022年09月04日 00:51/ 0 赞/ 251 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 353 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 340 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 370 阅读

相关 VUE组件

介绍几种VUE组件定义方法定义VUE 字符串组件 Vue.component('order-item', { //定义VUE组件的属

ゞ浴缸里的玫瑰/ 2022年03月26日 13:10/ 0 赞/ 361 阅读

相关 VUE组件

VUE Component 一、概述 1. 作用扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。二、VUE前情回顾使用： 1.

雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 348 阅读

相关 vue组件样式

背景使用嵌套组件时，样式往往会覆盖，即子组件的样式会覆盖App.vue的样式比如App.vue的h1标签的颜色是红色，User.vue的h1是绿色，但运行时，都变成

约定不等于承诺〃/ 2021年12月12日 00:19/ 0 赞/ 380 阅读

相关 Vue组件

为什么使用组件 JavaScript能力的复用。Vue.js的组件提高重复性，让代码可以复用。组件的用法组件在使用前先需要注册。注册分为两种方式：全局注册和局

叁歲伎倆/ 2021年09月27日 13:56/ 0 赞/ 443 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 633 阅读