詳解vue 自定義組件使用v-model 及探究其中原理
更新時間：2019年10月11日 15:08:46 作者：RocChan
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1、首先我們來實現(xiàn)自定義組件中使用v-model
父組件中注冊子組件
<template>
<div id="app">
<p>{{name}}</p>
<MyInput v-model="name"/>
</div>
</template>
<script>
import MyInput from './components/MyInput.vue'
export default {
name: 'app',
data(){
return {
name: 132
}
},
components: {
MyInput
},
}
</script>
子組件接收父組件傳值
<template>
<div>
<input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
</div>
</template>
<script>
export default {
name: "MyInput",
props: {
value: ""
},
};
</script>
2.探究v-model
在input中的v-model功能是實現(xiàn)數(shù)據(jù)的雙向綁定，即綁定name值及改變值。
工作等同于以下代碼:
<input type="text" v-bind:value="name" v-on:input="event=>name=event.target.value" />
v-bind將name的值綁定到value
v-on綁定input事件，當事件觸發(fā)時將事件目標值賦值給name
而在自定義標簽中的v-model與在input中的功能一致，但綁定的事件有些許不同，如下：
<MyInput type="text" v-bind:value="value" v-on:input="value=>name=value" />
在子組件中使用$emit觸發(fā)MyInput中的input事件，此時$emit并不能傳input的event的事件，而是直接傳目標值。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vue前后端不同端口的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
el-select如何獲取下拉框選中l(wèi)abel和value的值
在開發(fā)業(yè)務(wù)場景中我們通常遇到一些奇怪的需求,例如el-select業(yè)務(wù)場景需要同時獲取我們選中的label跟 value,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取下拉框選中l(wèi)abel和value的值,需要的朋友可以參考下2022-10-10
vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由
本文主要介紹了vue?router權(quán)限管理實現(xiàn)不同角色顯示不同路由，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在前端開發(fā)中,獲取登錄用戶的用戶名是一項常見的需求,這篇文章主要給大家介紹了關(guān)于前端Vue如何獲取登錄的用戶名或用戶id的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
vue3中如何使用Pinia實現(xiàn)數(shù)據(jù)持久化操作
使用vue3中的pinia,我們可以在多個頁面間共享數(shù)據(jù),但是一旦我們關(guān)閉或刷新頁面,這些數(shù)據(jù)就會丟失,因此,我們需要有一種數(shù)據(jù)持久化的解決方案,下面我們就來看看具體如何解決的吧2023-10-10
這篇文章主要為大家詳細介紹了Vue導入Echarts實現(xiàn)折線散點圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了Element Dialog對話框的使用示例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Vue 無限滾動加載指令的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了Vue2+element-ui使用面包屑導航的正確姿勢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04