概述
<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>
最后
以上就是正直白开水为你收集整理的如何给组件自定义数据动态绑定v-model的全部内容，希望文章能够帮你解决如何给组件自定义数据动态绑定v-model所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复