子组件效果：

<template>
  <el-input
    v-model="currentInput"
    class="input-search"
    :clearable="clearable"
    :placeholder="placeholder"
    @change="change"
    @keyup.native.enter="search"
  >
    <i slot="suffix" class="el-icon-search" @click="search"></i>
    <!-- 在input首部增加图标：使用 slot="prefix" 或者通过 prefix-icon="icon" 属性-->
    <!-- 在input尾部增加图标：使用 slot="suffix" 或则通过 suffix-icon="icon" 属性-->
  </el-input>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from '@vue/composition-api';
import { useI18n } from '@/lang/useLocale'; // 国际化

const i18n = useI18n();

export default defineComponent({
  name: 'InputSearch',
  props: {
    value: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: i18n.t('国际化.国际化.国际化')
    }
  },
  setup(props, { emit }) {
    // 数据双向绑定
    const currentInput = ref(props.value);
    watch(() => props.value, val => {
      currentInput.value = val;
    });
    
    const change = val => {
      emit('input', val);
      emit('change', val);
    };
    const search = () => {
      emit('search', currentInput.value);
    };
    return {
      currentInput,
      change,
      search
    };
  }
});
</script>

<style scoped lang="less">
.input-search {
  /deep/.el-input__inner {
    border-radius: 4px;
    background-color: #F5F5F5;
    font-size: 13px;
    padding-right: 60px;
    &:focus{
      background-color: #fff;
    }
  }
  /deep/.el-input {
    width: 220px;
    height: 32px;
    background: #F5F5F5;
  }
  .el-icon-search{
    width: 40px;
    height: 32px;
    line-height: 32px;
    background: #1993FF;
    border-radius: 0px 4px 4px 0px;
    text-align: center;
    transition: all .3s;
    color: #fff;
    cursor: pointer;
  }
  /deep/.el-icon-close{
    position: absolute;
    right: 46px;
    top: 0;
  }
  /deep/.el-input .el-input__icon {
    font-size: 14px;
  }
  /deep/.el-input__suffix {
    right: 1px;
  }
}
</style>

 父组件中调用该子组件：

import InputSearch from "./input-search.vue";

components: {

InputSearch

},

<input-search v-model="params.inputSearch" :clearable="true" :placeholder="'ABCD'"></input-search>
// v-model: 数据双向绑定

注意，这里不可以直接在父组件中使用 :value = "params.inpurSearch" 代替 v-model="params.inpurSearch"，这样是不被允许的, 因为vue是单项数据流，而这里要实现的是数据双向绑定。