三 components/search/ index.vue

<template>
	<view class='search'>
		
		<slot name='left'>
			<view>返回</view>
		</slot>
		
		<input type="text" :value='value' @input='inputChange'>
		
		<slot name='right'>
			<view>搜索</view>
		</slot>
		
	</view>
</template>

<script>
export default{
	props:{
		value:{
			type:String
		}
	},
	data () {
		return {
			key:''
		}
	},
	methods:{
		inputChange( e ){
			this.key = e.detail.value;
		}
	},
	watch:{
		key( newVal ){
			//让list.vue组件的双向绑定的值也可以修改
			this.$emit('input',newVal);
			//触发组件的@change事件，并且传递过去参数
			this.$emit('change',newVal);
		},
		value:{
			immediate:true,
			handler( newVal ){
				this.key = newVal;
			}
		}
		
	}
}
</script>

<style>
.search{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width:100%;
	height:66rpx;
}
.search input{
	width: 559rpx;
	height: 66rpx;
	padding:0 10rpx;
	background: #ccc;
	border-radius: 36rpx;
}

</style>