vue封裝一個搜索組件

vue封裝一個搜索組件

話不多說，直接上代碼！！！
搜索組件：

<!--  -->
<template>
  <div>
    <input
      type="text"
      v-model="inputValue"
      placeholder="請輸入"
      @input="getValue"
      @keydown.enter="search"
    />
  </div>
</template>

<script>
export default {
  name: "app",
  components: {},
  data: function() {
    return {
      inputValue: "" //默認搜索框的值是空
    };
  },
  methods: {
    getValue(e) {
      //  拿到輸入框的值
      console.log(e.target.value);
      this.inputValue = e.target.value;
      // console.log(this.inputValue);
    },
    search(){
      if(this.inputValue==""){
        alert('不能爲空')
      }else{
        this.inputValue!==""
      this.$emit('sou',this.inputValue);
      alert('發送成功')
      
      }
   
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>

父組件引用：

<template>
  <div class="home">
    <search @sou="go" />
    <div class="box">
      <div v-for="(item,index) in this.arr" :key="index">{{item}}</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import search from "../components/search";
export default {
  name: "Home",
  components: {
    search
  },
  data: function() {
    return {
      list: [1, 2, 3, 4, 5],
      arr: []
    };
  },
  methods: {
    go(e) {
      var temp = [];
      window.console.log(e, "父組件");
      this.list.forEach(el => {
        if (el == e) {
          temp.push(e);
          this.arr = temp;
        }
      });
    }
  }
};
</script>
<style scoped>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
</style>