父组件中=>

<template><div class="home"><Search @title="getTitle"></Search></div>
</template><script>
import Search from "@/components/search/search.vue";
export default {name: "Home",components: {Search},
methods: {//获取文本框里的值getTitle(data){console.log(data)}}
};
</script>

子组件中=>

<template><div class="find"><div class="search_input"><i class="fa fa-search"></i><input type="search"  placeholder="输入关键词检索数据库" v-model="title" @input="send" @keyup.enter="empty" /></div><p @click="cancel">取消</p></div>
</template>
<script>
export default {name: "search",data(){return{title:""   // 搜索内容}},methods:{send(){this.$emit("title",this.title)    // 子组件传递给父子件得值},cancel(){this.title = ''},empty(){this.title = ''}}
};
</script>
<style lang="scss">
.find{font-size: 15px;display: flex;justify-content: space-around;align-items: center;height: 50px;p{margin-left: -25px;}
}
.search_input {width: 88%;
}
.search_input input[type="search"] {display: inline-block;width: 90%;border-radius: 15px;height: 30px;text-indent: 30px;border: 1px solid;outline: none;padding-right: 10px;
}
.search_input input[type="text"]:focus {border: 0px;border-color: white;
}
.search_input i {position: relative;left: 30px; // 这里更改图标的位置// top: 1px;// color: #B2B2B2;//这里可以更改图标的颜色
}
</style>