Vue cli 全局样式与局部样式

最新推荐文章于 2024-08-06 18:59:21 发布

purple_lumpy

最新推荐文章于 2024-08-06 18:59:21 发布

阅读量6.4k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/purple_lumpy/article/details/81272877

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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