vue一步一步带你封装一个按钮组件

Posted 2021-08-16 小歌谣（公众号同名）

# 前言
本文主要对子组件的封装做一个了解
首先我们直接看一下代码显示 首先是今天有一个学妹
过来问我如何封装子组件

# 实现效果

首先这个组件是基于eleemnt-ui进行封装的
我们看一眼实现效果

 

有了实现效果 之后
我们一起来看看他的父子组件

有了实现效果 之后
我们一起来看看他的父子组件

父组件

   <geyaoInputSearch
              class="r"
              placeholder="按服务器名称搜索"
              ref="searchInput"
              @search="searchData"
            ></geyaoInputSearch>

子组件

<template>
      <!-- -->
  <div class="geyao-input-search">
    <!--  封装带有文本框的按钮模式  -->
    <!--   placeholder 按钮的提示文字 -->
    <!--  inputText文本框绑定的值  -->
    <!--  获取焦点进行一个置空操作  -->
    <!--    -->
    <el-input
      :class=