vue + element-ui 搜索组件封装

子组件：

<template>
  <div class="search_page">
    <el-input v-model="search"></el-input>
    <el-button type="primary" @click="searchHandle">搜索</el-button>
    <el-button @click="resetHandle">重置</el-button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      search: ''
    }
  },
  methods: {
    searchHandle() {
      this.$emit('searchHandle', this.search) 
    },
    resetHandle() {
      this.search = ''
      this.$emit('searchHandle', this.search)  
    }
  }
}
</script>

父组件调用：

<template>
	<Search @searchHandle="searchHandle($event)"></Search>
</template>

<script>
import Search from '@/components/Search '
export default {
	components: {
		Search
	},
	methods: {
		searchHandle (event) {
			// 请求接口，执行搜索 参数event
		}
	}
}
</script>

最后

以上就是鲜艳小刺猬最近收集整理的关于vue + element-ui 搜索组件封装的全部内容，更多相关vue内容请搜索靠谱客的其他文章。