Vue中怎么使用v-model自定义组件
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会自动实现数据更新。
看完上述内容,你们掌握Vue中怎么使用v-model自定义组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!