Vue自定义组件如何使用v-model
我们在使用vue的时候如果想实现双向数据绑定，就会使用v-model，代码如下：
<input v-model="something">那要是自定义了一个组件，想实现双向数据绑定该如何呢？首先我们要清楚v-model的原理，上面的代码其实是如下代码的一种简写：
<input
:value="something"
@:input="something = $event.target.value">下面我们来看一个需求,代码如下：
<div id="app">
<p>{{msg}}</p>
<my-input>
</div>通过完成my-input组件的代码，实现数据双向绑定。
第一种实现方式，如果my-input换成input直接一个v-model就搞定了，但是现在我们不使用v-modle如何实现呢？看代码：
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 使用自定义子组件,通过value绑定msg ,-->
<my-inputt :value="msg" @input="changemsg">
</div>
<script>
// 1、自定义组件,
// a、用props接收value传递过来的参数,
// b、用内部数据接收value
// c、新建oninput方法，更改currentvalue,
// 让子组件函数触发父组件函数，并传值
// d、建立模板，在文本框中绑定通过value绑定currentvalue，
// 通过input绑定oninput事件
Vue.component("my-inputt", {
template: `<div>
my-input:
<input
type="text"
:value=currentvalue
@input="oninput"/>
</div>`,
props: ["value"],
data() {
return {
currentvalue: this.value
}
},
methods: {
oninput(e) {
this.currentvalue = e.target.value;
this.$emit('input', e.target.value)
}
}
})
new Vue({
el:"#app",
data: {
msg: "初始值"
},
methods: {
changemsg(v) {
this.msg = v
}
}
})
</script>
</body>关键点在于自组件如何向父组件传值，数据的流向是，父组件将msg传递个自组件，自组件拷贝了一个副本，修改副本后通过触发父组件绑定的函数，从而达到数据双向绑定的原理。
下面我们在组件中使用v-model来实现上面的功能：
<body>
<div id="app">
<p>{{msg}}</p>
<my-input v-model="msg">
</div>
<script>
Vue.component("my-input",{
template:`<div>
<input type="text"
:value="currentValue"
@input="Oninput">
</div>`,
props:["value"],
data(){
return {
currentValue:this.value
}
},
methods: {
Oninput($event){
this.currentValue = $event.target.value;
this.$emit('input',$event.target.value)
}
},
created () {
console.log(this.value)
}
})
new Vue({
el:"#app",
data:{
msg:"初始值"
}
})
</script>
</body>对比一下我们发现使用v-model相对来说比较简洁，而且不需要对父组件增加额外的方法，第一种方案父组件额外定义了一个changemsg的函数，而第二种方案却没有，第二种方案只需要监听自组件内部事件，在相应的地方触发input事件即可，更改数据的事情vue会自动更新。
对于一个带有 v-model 的组件原理大概有以下几点：
1、首先带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件
2、然后子组件通过 prop接收一个 value;
3、最后子组件利用 $emit 触发 input 事件，并传入新值value给父组件；
4、vue会自动实现数据更新。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-05-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
