Vue中怎么使用v-model自定義組件

發(fā)布時(shí)間：2021-07-09 10:53:49 來源：億速云閱讀：243 作者：Leah 欄目：大數(shù)據(jù)

Vue中怎么使用v-model自定義組件，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

我們在使用vue的時(shí)候如果想實(shí)現(xiàn)雙向數(shù)據(jù)綁定，就會使用v-model，代碼如下：

<input v-model="something">

那要是自定義了一個(gè)組件，想實(shí)現(xiàn)雙向數(shù)據(jù)綁定該如何呢？首先我們要清楚v-model的原理，上面的代碼其實(shí)是如下代碼的一種簡寫：

<input  :value="something"  @:input="something = $event.target.value">

下面我們來看一個(gè)需求,代碼如下：

  <div id="app">        <p>{{msg}}</p>        <my-input>  </div>

通過完成my-input組件的代碼，實(shí)現(xiàn)數(shù)據(jù)雙向綁定。

第一種實(shí)現(xiàn)方式，如果my-input換成input直接一個(gè)v-model就搞定了，但是現(xiàn)在我們不使用v-modle如何實(shí)現(xiàn)呢？看代碼：

<body><div id="app"><p>{{msg}}</p><!-- 使用自定義子組件,通過value綁定msg ,--><my-inputt :value="msg" @input="changemsg"></div>
<script>// 1、自定義組件,// a、用props接收value傳遞過來的參數(shù),// b、用內(nèi)部數(shù)據(jù)接收value// c、新建oninput方法，更改currentvalue,//   讓子組件函數(shù)觸發(fā)父組件函數(shù)，并傳值// 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>

關(guān)鍵點(diǎn)在于自組件如何向父組件傳值，數(shù)據(jù)的流向是，父組件將msg傳遞個(gè)自組件，自組件拷貝了一個(gè)副本，修改副本后通過觸發(fā)父組件綁定的函數(shù)，從而達(dá)到數(shù)據(jù)雙向綁定的原理。

下面我們在組件中使用v-model來實(shí)現(xiàn)上面的功能：

<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>

對比一下我們發(fā)現(xiàn)使用v-model相對來說比較簡潔，而且不需要對父組件增加額外的方法，第一種方案父組件額外定義了一個(gè)changemsg的函數(shù)，而第二種方案卻沒有，第二種方案只需要監(jiān)聽自組件內(nèi)部事件，在相應(yīng)的地方觸發(fā)input事件即可，更改數(shù)據(jù)的事情vue會自動更新。

對于一個(gè)帶有 v-model 的組件原理大概有以下幾點(diǎn)：

1、首先帶有v-model的父組件通過綁定的value值（即v-model的綁定值）傳給子組件

2、然后子組件通過 prop接收一個(gè) value;

3、最后子組件利用 $emit 觸發(fā) input 事件，并傳入新值value給父組件；

4、vue會自動實(shí)現(xiàn)數(shù)據(jù)更新。

看完上述內(nèi)容，你們掌握Vue中怎么使用v-model自定義組件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

Vue中怎么使用v-model自定義組件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽