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