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插槽