Vue cli 全局样式与局部样式

最新推荐文章于 2023-06-13 09:38:10 发布

原创最新推荐文章于 2023-06-13 09:38:10 发布 · 6.5k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍Vue CLI框架下单文件组件的样式管理方式，重点讲解如何使用scoped属性来限定CSS仅在当前组件中生效，避免样式冲突。

当使用 Vue cli 时，每一个组件，变成了单文件组件。在这个组件中，我们可以对它的逻辑、模版、样式进行定义，在定义样式的时候，可以分为：全局样式、局部样式。

子组件文件（xxx.vue）：

<template>
  <li class="item" @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  props: ['content', 'index'],
  methods: {
  	handleDelete () {
  		this.$emit('delete',this.index);
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.item{color:green;}
</style>

item 类的样式，不会影响到父组件中item 类的样式。其中 <style> 标签中的“scoped” 说明了该style的作用域仅为该组件（文件）内。当删除scoped 时，该样式就对其他组件也生效（不推荐！）。