父组件中=>
<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>