詳解vue 自定義組件使用v-model 及探究其中原理
更新時間：2019年10月11日 15:08:46 作者：RocChan
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
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事件，當(dāng)事件觸發(fā)時將事件目標(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事件，此時$emit并不能傳input的event的事件，而是直接傳目標(biāo)值。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue全局組件與局部組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
vue.js中window.onresize的超詳細(xì)使用方法
這篇文章主要給大家介紹了關(guān)于vue.js中window.onresize的超詳細(xì)使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
今天封裝一個導(dǎo)航欄的組件,使用的Element的NavMenu組件。遇到一個問題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下2023-04-04
vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來了，大家根據(jù)自身需要選擇，需要的朋友可以參考下2018-09-09
在 Vue 3 中,v-bind?指令用于將表達(dá)式的值綁定到 DOM 元素的屬性上,這個指令的語法與 Vue 2 相同,但有一些細(xì)微的變化和改進(jìn),這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了Vue替代vuex的存儲庫Pinia，聽說pinia與vue3更配,便開啟了vue3的學(xué)習(xí)之路，pinia 和 vuex 具有相同的功效， 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)2022-09-09
Print.js一個小的javascript庫,可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于printJS打印問題匯總以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了詳解Vite的新體驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
webpack vue 項目打包生成的文件,資源文件報404問題的修復(fù)方法(總結(jié)篇)
這篇文章主要介紹了解決webpack vue 項目打包生成的文件,資源文件報404問題的修復(fù)方法,需要的朋友可以參考下2018-01-01