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 + element-ui 搜索组件封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。