vue-自定义组件

一.自定义组件: Component

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

二.基本用法

2.1 创建一个自定义组件(myTransition折叠)

<template>
<div id="myTransition">
  <div class="ss">
  <slot name="header"></slot>
  </div>
  <el-button class="but" v-if="!show" @click="show = !show" style="width: 100%;  height: 10px;">
    <i class="el-icon-arrow-down" ></i>
  </el-button>
  <transition name="fade">
  <div v-if="show" class="up" style="width: 100%;">
  <div class="up2" style="width: 100%;">
  <slot name="footer"></slot>
  </div>
  <el-button class="but" v-if="show" @click="show = !show" style="width: 100%;">
    <i class="el-icon-arrow-up" ></i>
  </el-button>
  </div>
  </transition>
</div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.el-icon-d-caret {
  font-size: 3px;
}
.up {
    border: 0px solid #ebebeb;
    border-radius: 3px;
    transition: .2s;
    background-color: #fff;
}
.up2 {
    padding-left: 10px;
}
.but {
    border: 0;
    height: 10px;
}
.ss {
    background-color: #fff;
    padding-top: 10px;
    padding-left: 10px;
}
</style>

2.2引用自定义组件

...
<myTransition>
     <a slot="header">开始日期：</a>
      <el-date-picker @keyup.enter.native="handleFilter" style="width: 140px;" slot="header" class="filter-item" placeholder="请选择日期" v-model="listQuery.xdstart" suffix-icon="el-icon-date" value-format="yyyyMMdd">
      </el-date-picker><a slot="header">&nbsp;-&nbsp;</a>
      <el-date-picker @keyup.enter.native="handleFilter" style="width: 140px;" slot="header" class="filter-item" placeholder="请选择日期" v-model="listQuery.xdend" suffix-icon="el-icon-date" value-format="yyyyMMdd">
      </el-date-picker><a slot="header">&nbsp;</a>
      ...
      <el-button class="filter-item" type="primary" icon="el-icon-search" slot="header" @click="handleFilter">搜索</el-button><br slot="header">
      ...
      <el-select v-model="listQuery.kcjgbz" prop="kcjgbz" clearable placeholder="盘点结果" @keyup.enter.native="handleFilter" style="width: 120px;" slot="footer" class="filter-item">
        <el-option v-for="item in kcjgbz_options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
      </el-select><a slot="footer">&nbsp;</a>
       <el-input @keyup.enter.native="handleFilter" style="width: 120px;" slot="footer" class="filter-item" placeholder="经销商代码" v-model="listQuery.xskhdm">
      </el-input><br slot="footer">
      <a slot="footer">结束日期：</a>
      <el-date-picker @keyup.enter.native="handleFilter" style="width: 140px;" slot="footer" class="filter-item" placeholder="请选择日期" v-model="listQuery.jsstart" suffix-icon="el-icon-date" value-format="yyyyMMdd">
      </el-date-picker><a slot="footer">&nbsp;-&nbsp;</a>
      </el-input><a slot="footer">&nbsp;</a>
       <el-input @keyup.enter.native="handleFilter" style="width: 120px;" slot="footer" class="filter-item" placeholder="仓库名称" v-model="listQuery.kcckmc">
      </el-input>
     </myTransition>
     ...
     <script> // 引入声明
     import myTransition from 'components/MyTransition/index.vue'
      export default {
      components: { myTransition }, 
       ...

注:

slot插槽