vue插槽应用

所谓插槽就是用来分发内容，给组件应用时能够添加需要的东西，就比如一个输入框组件，我引用这个组件，我需要在组件后面加上图标啥的，直接用插槽封装这组件就可以了，需要就用，不需要就忽略：如下封装

<template>
    <el-input v-model="currentValue" ref="nvInput"
     :maxlength="maxlength" :minlength="minlength" :placeholder="isNvDisabled?'-':placeholder" :clearable="clearable" :prefix-icon="prefixIcon"
     :suffix-icon="suffixIcon" :auto-complete="autoComplete" :readonly="readonly"
     @blur="blur" @focus="focus" @change="change" @clear="clear"  :type="type"
     :rows = " isNvDisabled ? null : rows"
     :disabled = "isNvDisabled" :class="{'is-nv-disabled': isNvDisabled}">
    <slot slot = "append" name="append"/>
    <slot slot = "prepend" name="prepend"/>
    <slot slot = "suffix" name="suffix"/>
    <slot slot = "prefix" name="prefix" />
     </el-input>
</template>

如下使用：

<nv-input v-model="searchForm.SITE_NAME" readonly @click.native="showSiteDialog" placeholder="请选择站点名称" size="middle" @keyup.enter.native="getList" class="all-width">
    <i class="el-icon-search el-input__icon" slot="suffix" />
</nv-input>