vue中封装搜索功能并注册为全局组件

场景：
  在列表的上方总会有一个模糊查询的搜索框，通过输入内容，点击搜索按钮，对列表进行查询并更新内容。

思路：

1. 使用的是ui组件库是element ui，首先复制一个基本的input和一个button组成上面的搜索框。

2. input输入框v-model绑定的值即是从父组件列表页传过来的需要搜索的值；button按钮则@click绑定搜索事件，将搜索值通过该事件发射到父组件页面，父组件页面通过接收该事件，并给参数赋值，调用接口刷新页面。

3. 在main.js中将该组件注册为全局组件，供该项目任一页面使用

   // 搜索框组件
   <template>
      <p class="p02">
           <el-input
             v-model="searchValue"
             size="small"
             placeholder="输入搜索条件"
             style="width: 240px; margin-right: 10px"
             @keyup.enter.native="inputSearch(searchValue)"
           >
             <el-button
               slot="append"
               icon="el-icon-search"
               size="small"
               @click="inputSearch(searchValue)"
             ></el-button>
           </el-input>
         </p>
   </template>
   
   <script>
   export default {
     data () {
       return {
         searchValue: ''
       }
     },
     created () {
     },
     methods: {
       // 向父组件发射事件，第一参数是事件名，第二个参数是传的值
       inputSearch () {
         this.$emit('searchInputTable', this.searchValue)
       }
     }
   }
   </script>
   
   <style lang="scss" scoped>
     /deep/ .el-input {
       width: 260px;
     }
     .input-with-select .el-input-group__prepend {
       background-color: #fff;
     }
   </style>
   
   

   <template>
     <div>
     	// 父组件通过@事件名 接收子组件传过来的事件
        <ymSearchInput @searchInputTable="getSearchInput"></ymSearchInput>
     </div>
   </template>
   
   <script>
   import { apiSettAcctList } from '@/api/issue/sett.js'
   import detail from './acctDetail'
   
   export default {
     methods: {
       getSearchInput (obj) {
         this.tableData.getTableList.params.search = obj
       }
     }
   }
   </script>
   

   // main.js
   import Vue from 'vue'
   import ElementUI from 'element-ui'
   
   // 引入searchInput组件
   import searchInput from '@/components/SearchInput'
   
   import App from './App'
   import router from './router'
   import store from './store'
   
   Vue.config.devtools = true
   
   // 注册为全局组件，该项目的所有页面都可以直接使用<ymSearchInput></ymSearchInput>
   Vue.component('ymSearchInput', searchInput)
   
   Vue.config.productionTip = false
   Vue.use(ElementUI)
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     store,
     render: h => h(App)
   })