vue + element-ui 搜索组件封装_iconify-ep

子组件：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

父组件调用：

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

<script>
import Search from '@/components/Search '
export default {
	components: {
		Search
	},
	methods: {
		searchHandle (event) {
			// 请求接口，执行搜索 参数event
		}
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17