Vue cli 全局样式与局部样式

113 阅读 0 评论 75 点赞

我是靠谱客的博主炙热小蚂蚁，最近开发中收集的这篇文章主要介绍Vue cli 全局样式与局部样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

当使用 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 时，该样式就对其他组件也生效（不推荐！）。