重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
Vue中怎么使用v-model自定义组件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联成立与2013年,是专业互联网技术服务公司,拥有项目成都网站设计、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元东莞做网站,已为上家服务,为东莞各地企业和个人服务,联系电话:18982081108
我们在使用vue的时候如果想实现双向数据绑定,就会使用v-model,代码如下:
那要是自定义了一个组件,想实现双向数据绑定该如何呢?首先我们要清楚v-model的原理,上面的代码其实是如下代码的一种简写:
下面我们来看一个需求,代码如下:
{{msg}}
通过完成my-input组件的代码,实现数据双向绑定。
第一种实现方式,如果my-input换成input直接一个v-model就搞定了,但是现在我们不使用v-modle如何实现呢?看代码:
{{msg}}
// 1、自定义组件,
// a、用props接收value传递过来的参数,
// b、用内部数据接收value
// c、新建oninput方法,更改currentvalue,
// 让子组件函数触发父组件函数,并传值
// d、建立模板,在文本框中绑定通过value绑定currentvalue,
// 通过input绑定oninput事件
Vue.component("my-inputt", {
template: `
`,my-input:
type="text"
:value=currentvalue
@input="oninput"/>
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
}
}
})
关键点在于自组件如何向父组件传值,数据的流向是,父组件将msg传递个自组件,自组件拷贝了一个副本,修改副本后通过触发父组件绑定的函数,从而达到数据双向绑定的原理。
下面我们在组件中使用v-model来实现上面的功能:
{{msg}}
Vue.component("my-input",{
template:`
`,
:value="currentValue"
@input="Oninput">
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:"初始值"
}
})
对比一下我们发现使用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自定义组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!