# 前言
本文主要對子組件的封裝做一個了解
首先我們直接看一下代碼顯示 首先是今天有一個學妹
過來問我如何封裝子組件

# 實現效果

首先這個組件是基于eleemnt-ui進行封裝的
我們看一眼實現效果

?

有了實現效果 之后
我們一起來看看他的父子組件

有了實現效果 之后
我們一起來看看他的父子組件

父組件

<geyaoInputSearchclass="r"placeholder="按服務器名稱搜索"ref="searchInput"@search="searchData"></geyaoInputSearch>

子組件

<template><!-- --><div class="geyao-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-buttonclass="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.whichif (keyCode == 13) {this.searchData()}}} } </script> ? <style lang="scss"> .geyao-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修改綁定一個類 一個三元運算符

# 第二行
?inputPlaceHolder是父親組件的值 直接父子組件傳值
?值為空的時候

?# 第三行
獲取焦點的時候把inputPlaceHolder置空

# 第四行
失去焦點的時候將inputPlaceHolder顯示

# 第五行
輸入的時候父子觸發顯示X號按鈕

我是歌謠 放棄很容易 但是堅持一定很酷

?

總結

以上是生活随笔為你收集整理的vue一步一步带你封装一个按钮组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。