如何给组件自定义数据动态绑定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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宋承佑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值