vue 封装搜索组件

<template>
  <div class="search_wrop">
    <div>
      <input :value="currentValue" @input="inputload" />
    </div>
  </div>
</template>
<script>
export default {
  name: "search",
  data() {
    return {
      currentValue: this.value
    };
  },
  props: {
    value: {
      type: [String],
      default: ""
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    }
  },
  methods: {
    setCurrentValue(value) {
      console.log(value);
      if (value === this.currentValue) return;
      this.currentValue = value;
    },
    inputload(event) {
      let value = event.target.value;
      this.$emit("input", value);
    }
  }
};
</script>
<style lang="scss" scoped>
.search_wrop {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
  height: 32px;
  background: #fff;
  padding-left: 5px;
  display: flex;
  justify-content: space-between;
  .middle {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    input {
      width: 100%;
      height: 30px;
      outline: none;
      border: 0;
      font-size: 14px;
    }
  }
}
</style>

在组件中引入

import search from "@/components/search";
components: { search }
<search
      @keyup.enter="blurFun"
      v-model="keyworldVal"
    ></search>
methods: {
    //获取搜素值
    blurFun(keyworldVal) {
      console.log(keyworldVal);
    }
  },