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自定义组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!