如何给组件自定义数据动态绑定v-model

65 阅读 0 评论 43 点赞

我是靠谱客的博主正直白开水，这篇文章主要介绍如何给组件自定义数据动态绑定v-model，现在分享给大家，希望可以做个参考。

<div id="app">
	<!-- 使用v-model命令绑定data中需要展示数据 -->
	<custom-input v-model="msg"></custom-input>
	<!-- 使用文本插值展示内容 -->
	<p>{{msg}}</p>
</div>
<script>
	Vue.component('custom-input',{
		// 1.子组件中需要接收value
		props:['searchText'],
		// 2.$emit中的第一个参数监听input，第二个参数获取的是该标签实时变化的内容并传递给父组件
		template:`<input type='text' v-bind:value='searchText' v-on:input="$emit('input',$event.target.value)">`
	})

	var vm = new Vue({
		el:'#app',
		// 定义需要展示的数据
		data:{
			msg:""
		}
	})
</script>