带学妹理解Vue的子组件封装

我是歌谣 放弃很难 但是坚持一定很酷

前言

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

实现效果

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

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

父组件

 <!--增强漏扫（控制台页面）查询页面封装 -->
            <ecloudInputSearch
              class="r"
              placeholder="按服务器名称搜索"
              ref="searchInput"
              @search="searchData"
            ></ecloudInputSearch>

子组件

<!--增强漏扫（控制台页面）查询页面封装 -->
<template>
      <!-- -->
  <div class="ecloud-input-search">
    <!--  封装带有文本框的按钮模式  -->
    <!--   placeholder 按钮的提示文字 -->
    <!--  inputText文本框绑定的值  -->
    <!--  获取焦点进行一个置空操作  -->
    <!--    -->
    <el-input
      :class="['input-content', inputText != '' ? 'input-hover' : '']"
      :placeholder="inputPlaceHolder"
      v-model="inputText"
      @focus="clearPlaceHolder()"
      @blur="setPlaceHolder()"
      @input="changeContent()"
      @keyup.enter.native="searchEnterFun"
    >

      <span slot="suffix" @click="clearText">
        <i class="eicon e-error icon-search"></i>
      </span>
    </el-input>
    <el-button
      class="search-content"
      :class="searchBtn ? 'btnOn' : 'btnOff'"
      icon="eicon e-search"
      @click="searchData"
    ></el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      searchBtn: false, //判断搜索框是否有输入的状态

      /*按钮框的提示文字*/
      inputPlaceHolder: ''
    }
  },
  props: {
    placeholder: {
      type: String,
      default: '请输入内容'
    }
  },
  watch: {
    inputText: function(newValue, oldValue) {
      this.changeContent()
    }
  },
  created() {
    this.inputPlaceHolder = this.placeholder
  },
  methods: {
    clearText() {
      this.inputText = ''
      this.searchData()
    },
    /*获取焦点就将placehoder置空*/
    clearPlaceHolder() {
      this.inputPlaceHolder = ''
    },
    setPlaceHolder() {
      this.inputPlaceHolder = this.placeholder
    },
    //监听搜索框的输入状态来改变搜索按钮
    changeContent() {
      if (this.inputText != '') {
        this.searchBtn = true
      } else {
        this.searchBtn = false
      }
    },
    searchData() {
      this.$emit('search', this.inputText)

    },
    searchEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 13) {
        this.searchData()
      }
    }
  }
}
</script>

<style lang="scss">
.ecloud-input-search {
  .input-content {
    /*宽度200px*/
    width: 200px;
    /*设置radio样式*/
    .el-input__inner {
      border-radius: 2px 0 0 2px;
      padding: 0 10px;
    }

    .icon-search {
      display: none;
    }
  }
  .input-hover {
    &:hover {
      .icon-search {
        font-size: 15px;
        color: #cccccc;
        display: inline-block;
      }
    }
    .el-input__inner:focus + .el-input__suffix {
      .icon-search {
        display: inline-block;
      }
    }
  }
  .search-content {
    font-size: 14px;
    width: 36px;
    height: 32px;
    border-left: 0;
    padding: 0;
    border-radius: 0 2px 2px 0;
    background: #f5f5f5;
    color: #999999;
    border-color: #d9d9d9;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    vertical-align: top;
  }
  .btnOn {
    background: #337dff;
    color: #ffffff;
    border-color: #337dff;
  }
  .btnOff {
    background: #f5f5f5;
    color: #999999;
    border-color: #d9d9d9;
  }
  .el-input__suffix {
    top: 8px;
    right: 9px;
    cursor: pointer;
  }
  .icon-search {
    font-size: 15px;
    color: #cccccc;
  }
}
</style>

解释

首先父子组件怎么引入就不多说了
直接说主要知识点 从上向下理解

第一行

class修改绑定一个类 一个三元运算符

:class="['input-content', inputText != '' ? 'input-hover' : '']"

绑定的值为不为空的时候绑定hover样式

第二行

inputPlaceHolder是父亲组件的值 直接父子组件传值
值为空的时候

显示名称

第三行

获取焦点的时候把inputPlaceHolder置空

第四行

失去焦点的时候将inputPlaceHolder显示

第五行

输入的时候父子触发显示X号按钮

第六行

按回车的时候进行父子传值
父组件拿到值之后进行搜索

我是歌谣 放弃很容易 但是坚持一定很酷

转载：https://blog.csdn.net/weixin_43392489/article/details/116266691