您好,登錄后才能下訂單哦!
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自定義組件的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。