vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
更新時(shí)間：2020年01月08日 09:23:25 作者：CANDY
這篇文章主要介紹了vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
我們都清楚v-model其實(shí)就是vue的一個(gè)語法糖，用于在表單控件或者組件上創(chuàng)建雙向綁定。
//表單控件上使用v-model
<template>
<input type="text" v-model="name" />
<input type="checkbox" v-model="checked"/>
<!--上面的input和下面的input實(shí)現(xiàn)的效果是一樣的-->
<input type="text" :value="name" @input="name=e.target.vlaue"/>
<input type="checkBox" :checked="checked" @click=e.target.checked/>
{{name}}
</template>
<script>
export default{
data(){
return {
name:"",
checked:false,
}
}
}
</script>
vue中父子組件的props通信都是單向的。父組件通過props向下傳值給子組件，子組件通過$emit觸發(fā)父組件中的方法。所以自定義組件是無法直接使用v-model來實(shí)現(xiàn)v-model雙向綁定的。那么有什么辦法可以實(shí)現(xiàn)呢？
//父組件
<template>
<div>
<c-input v-model="form.name"></c-input>
<c-input v-model="form.password"></c-input>
<!--上面的input等價(jià)于下面的input-->
<!--<c-input :value="form.name" @input="form.name=e.target.value"/>
<c-input :value="form.password" @input="form.password=e.target.value"/>-->
</div>
</template>
<script>
import cInput from "./components/Input"
export default {
components:{
cInput
},
data() {
return {
form:{
name:"",
password:""
},
}
},
}
</script>
//子組件 cInput
<template>
<input type="text" :value="inputValue" @input="handleInput">
</template>
<script>
export default {
props:{
value:{
type:String,
default:"",
required:true,
}
},
data() {
return {
inputValue:this.value,
}
},
methods:{
handleInput(e){
const value=e.target.value;
this.inputValue=value;
this.$emit("input",value);
},
}
}
</script>
根據(jù)上面的示例代碼可以看出，子組件c-input上綁定了父組件form的值，在子組件中通過:value接收了這個(gè)值，然后我們?cè)谧咏M件中修改了這個(gè)值，并且通過$emit觸發(fā)了父組件中的input事件將修改的值又賦值給了form。
綜上就實(shí)現(xiàn)了自定義組件中的雙向數(shù)據(jù)綁定！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue-router切換頁面時(shí)，獲取上一頁url以及當(dāng)前頁面url的方法
這篇文章主要介紹了使用vue-router切換頁面時(shí)，獲取上一頁url以及當(dāng)前頁面url的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
通過vue手動(dòng)封裝on、emit、off的代碼詳解
這篇文章主要介紹了通過vue手動(dòng)封裝on，emit，off的代碼詳解，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動(dòng)動(dòng)畫的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡單的無限循環(huán)滾動(dòng)動(dòng)畫的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了手寫Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容
這篇文章主要介紹了vue3 el-form-item如何自定義label標(biāo)簽內(nèi)容問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue中使用插槽（slot）、聚類插槽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了如何將百度地圖包裝成Vue的組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要給大家介紹了關(guān)于vue中路由傳參以及跨組件傳參的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
門戶（Portal）的概念是Vue3的新功能之一，也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見功能，Vue2 的 portal-vue 庫也提供了相似的功能。在 Vue3 中用 Teleport 對(duì)這個(gè)概念提供了原生支持。本文將介紹Teleport的相關(guān)用法2021-05-05
vue基于mint-ui實(shí)現(xiàn)城市選擇三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue基于mint-ui實(shí)現(xiàn)城市選擇三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04