Vue中在自己开发的组件使用v-model

我们都知道vue中可以使用v-mdel将原生input组件与一个变量绑定，从而实现数据-视图的双向绑定，当在input组件中输入数据时，绑定的变量也随之改变。

<input  type="text" v-model="searchvalue"/>
data(){
			return{
				searchvalue:'',
				
			}
		},

这样确实很方便，这样我们有了这样的想法：即能不能在自己写的组件也使用v-model呢？因为自带的组件样式都比较朴素，比如我们想自己写个好看的组件然后再这个自定义组件上实现v-model。
答案是可以的
这时我们就要了解v-model的原理了，v-model指令实际上是v-bind:value="变量名"和@input的简写，即默认向子组件传递一个值(这个值名字默认是value)和监听一个input事件(这个事件触发后的行为vue也帮我们写好了，比如我们自己用v-model绑定了一个变量bindvalue,触发input事件后就将bindvalue修改为子组件传递来的值)
示例代码
父组件(Search就是自己写得输入框组件)

 <Search v-model="searchvalue" />
 data(){
			return {
				searchvalue:''
			}
		},

子组件

<template>
	<div class="container">
		<div class="box">
		<input @input="changevalue" type="text" v-model="searchvalue"/>
		<button  class="search-btn">搜索</button>
		</div>
		<div class="lable">
			<span></span>
			<a class="link" v-for="(item,index) in datalist" :key="index" href="#">
				<span >{{item.text}}&nbsp;</span>
			</a>
			
			
		
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			value:{
				type:String,
				required:true
			}
		},
		data(){
			return{
				searchvalue:this.value,
				datalist:[
					{
						id:1,
						text:'农产品'
						
					},
					{
						id:2,
						text:'女装'
						
					},
					{
						id:3,
						text:'男装'
						
					}
				]
			}
		},
		components:{},
		methods:{
			changevalue(){
				this.$emit('input',this.searchvalue)
			}
		},
		mounted(){},
		created(){},
		watch:{}
	}
</script>

<style scoped lang="scss">
	.container{
		.box{
			height: 40px;
			width: 400px;
			border: 2px green solid;
			input[type="text"]{
				width: 80%;
				height: 95%;
			}
			.search-btn{
				float: right;
				width: 17%;
				background-color: green;
				height: 100%;
				color: white;
			}
		}
		.lable{
			.link{
				font-size: 12px;
				color: gray;
			}
			
		}
		
	}
</style>

大概思想就是监听原生输入框的input事件，input触发后使用

this.$emit('input',this.searchvalue)

向父组件传递当前原生输入框值，父组件接收到值修改v-model绑定的变量

标签：Vue,text,绑定,searchvalue,组件,input,model
来源： https://blog.csdn.net/m0_52364694/article/details/120377006