框架学习之VUE（八）搜索框组件。这一节写一下搜索组件的内容，尽量详细写出搭建的过程

1 搜索框组件

1-1
第一个问题 点击展开的时候 为啥不设置 height : auto ？
我直接展示不就好了吗？
有一个问题 0.3s 过渡动画会失效 为什么？
因为 如果最终的变化结果是 auto 浏览器渲染的时候 不会进行过渡 渲染完成后才想起需要过渡但是已经过去了

1-2
字体小图标 我们怎么封装为一个组件 ？
为什么需要封装成一个组件 ？
1）添加新的小图标的时候 不管是使用在线的还是本地的 都会多次更新内容
2） 小图标的名称大多数是作者起名 并不规范 对于后期维护存在问题

1、
新建一个Icon.vue组件

<template>
  <!-- 为啥名字是iconfont ? 因为使用的是阿里矢量 -->
  <!-- 默认名字就是这个 -->
  <i class="iconfont" :class="iconClass"></i>
</template>

<script>
// 写一个映射关系 里面可以写很多的内容
var map = {
   
  arrowUp: "icon-shangjiantou",
  arrowDown: "icon-iconfontarrows",
  search: "icon-sousuo",
};
export default {
   
  // 属性
  props: {
   
    type: {
   
      type: String,
      required: true,
    },
  },
  computed: {
   
    iconClass() {
   
      return map[this.type];
    },
  },
};
</script>

<style scoped>
@import "//at.alicdn.com/t/font_2118630_75xw63t1yj2.css";
</style>

2、
在 ChannelList.vue 引入并使用
引入

注册使用
并且将Icon 变成动态的

3、
有一个问题 当前 存在父组件 控制 子组件样式的情况
我们想处理这个事情 怎么做？
1）
子组件 Icon.vue 添加额外的属性 extraClass

父组件给设置一下