Vue封装一个iconfont组件

首先展示一下我的iconfont项目

创建一个Icon文件，代码如下

<template>
  <i class="iconfont" :class="type"></i>
</template>

<script>
export default {
  props:{
    type:{
      type:String,
      require:true
    }
  }
}
</script>

<style scoped>
@import '//at.alicdn.com/t/font_2648132_8d1o1q9779s.css';
//用于引入针对所选的iconfont生成的css，具体地址见项目
.iconfont {
  color: inherit;
  font-size: inherit;
}
</style>

父组件代码如下

<template>
  <div id="app">
    <Icon type="icon-guandao" />
  </div>
</template>

<script>
import Icon from './components/Icon'
export default {
  name: 'App',
  components: {
    Icon
  }
}
</script>

<style scoped>
.iconfont{
  color: red;
  font-size: 30px;
}
</style>

代码解释

<template>
  <i class="iconfont" :class="type"></i>
</template>

由于Icon组件本身不确定具体展示哪个图标，因此需要动态绑定Icon组件的class，由父组件传过来的type决定具体使用哪一个图标；父组件传参的值可从项目中复制代码选用特定的图标

<style scoped>
@import '//at.alicdn.com/t/font_2648132_8d1o1q9779s.css';
//用于引入针对所选的iconfont生成的css，具体地址见项目
.iconfont {
  color: inherit;
  font-size: inherit;
}
</style>

关于子组件的css，需要引入创建项目时生成的css

关于为什么要给.iconfont设置部分属性设置inherit属性，是因为我们往往想要通过父组件来对Icon组件的样式进行一些控制，在这里我想要对Icon组件的字体和颜色进行控制，因此需要在子组件设置inherit来继承父组件设置的样式，如果想要对其他的属性进行控制可类比书写

注意事项

Vue中为了保证组件间类名出现重复从而引起样式冲突，我们可以在组件css中添加scoped来确保每个组件有自己的作用域，因此就避免了冲突的问题。那么既然每个组件的作用域不一样，为什么刚才可以通过给父组件设置iconfont样式来影响子组件呢，是因为其实父组件设置样式是可以影响到子组件的根元素的

为了证明我们可以更改Icon组件的结构

<template>
  <i class="iconfont" :class="type">
    <span></span>
  </i>
</template>

由此可以得出结论