vue在組件中使用v-model的場(chǎng)景
一、使用場(chǎng)景
子組件想要使用父組件的值,又想去改父組件的值
二、V-Model的本質(zhì)
- 1.給子組件的
value傳個(gè)變量 - 2.監(jiān)聽子組件的
input事件,并且把傳過來的值賦給父組件的變量
三、關(guān)鍵步驟
1. props 的使用
在自定義的 vue 文件中，聲明父組件要向子組件傳遞的 prop 屬性，例如
props: {
// 接收string和number類型的值，
myValue: [String, Number],
},注意：
myValue這個(gè)屬性名稱是可以自定義的，但[String, Number]不能寫成字符串["String","Number"],因?yàn)榇藭r(shí)它們是構(gòu)造器，是js的全局api。
2. $emit 的使用
$emit 用于向上派發(fā)事件，在自定義組件中觸發(fā)，例如：
methods: {
changeInput ($event) {
this.$emit('myInput', $event.target.value)
},
}向上派發(fā)myInput事件，這樣model監(jiān)聽myInput才有意義： 當(dāng)輸入字符時(shí)觸發(fā)input事件，進(jìn)而派發(fā)觸發(fā)自定義的myInput事件， 然后model監(jiān)聽myInput，就實(shí)現(xiàn)了數(shù)據(jù)綁定。必須注意，這里的派發(fā)事件名myInput必須和model中的event的值相同。
PS: 通過
watch監(jiān)聽input標(biāo)簽的值，然后$emit派發(fā)事件，和通過@input派發(fā)事件具有一樣的效果。只要能達(dá)到通信的效果即可，手段是多樣的。
3. 關(guān)鍵的 model
model是允許 vue 自定義組件使用v-model的關(guān)鍵，雖然有時(shí)我們不顯性的使用它，也不影響我們?cè)谧远x組件中使用v-model指令，這只是因?yàn)楸辉O(shè)置默認(rèn)值。而有的時(shí)候，顯示的使用，并自定義model的prop和event會(huì)有益。這是官網(wǎng)關(guān)于model的介紹：
允許一個(gè)自定義組件在使用
v-model時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的v-model會(huì)把value用作 prop 且把input用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用valueprop 來達(dá)到不同的目的。使用model選項(xiàng)可以回避這些情況產(chǎn)生的沖突。
自定義 model 使用示例：
當(dāng)我們使用model的默認(rèn)值的時(shí)候value作prop，input作event時(shí)，可以省略不寫model。
model: {
prop: 'myValue', // 默認(rèn)是value
event: 'myInput', // 默認(rèn)是input
},四、不使用 model 選項(xiàng)的 v-model
當(dāng)前?? , 我們不對(duì) model 選項(xiàng)進(jìn)行特殊設(shè)置 示例：
1. 父組件 home
<template>
<home-child v-model="vModelData"></home-child>
</template>
<script>
import HomeChild from './child/HomeChild.vue'
export default {
name: 'Home',
components: {
HomeChild
},
data () {
return {
vModelData: 'hello v-model'
}
}
}
</script>2. 子組件homeChild
<template>
<div class="box">
<span>{{ value }}</span>
<button @click="testVModel">測(cè)試v-model</button>
</div>
</template>
<script>
export default {
name: 'HomeChild',
props: {
value: {
type: String,
default: ''
}
},
methods: {
testVModel () {
this.$emit('input', '我是子組件')
}
}
}
</script>3. 效果
點(diǎn)擊前：
點(diǎn)擊后：
五、用 model 選項(xiàng)的 組件使用 v-model
1、父組件
<template>
<div class="home">
<h3>輸入的實(shí)時(shí)內(nèi)容：{{ myValue }}</h3>
<custom-model v-model="myValue"></custom-model>
</div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
name: 'Home',
components: {
CustomModel,
},
data () {
return {
myValue: ''
}
},
}
</script>2. 子組件
<template>
<!-- 自定義組件中使用v-mode指令 -->
<input type="search" @input="changeInput" data-myValue="">
</template>
<script>
export default {
name: 'CustomModel',
// 當(dāng)我們使用model的默認(rèn)值的時(shí)候value作prop，input作event時(shí)，可以省略不寫model。
model: {
prop: 'myValue', // 默認(rèn)是value
event: 'myInput', // 默認(rèn)是input
},
props: {
// 接收string和number類型的值，
// 注意不能是寫成字符串["String","Number"],因?yàn)榇藭r(shí)它們是構(gòu)造器，是全局變量
myValue: [String, Number],
},
methods: {
changeInput ($event) {
// 向上派發(fā)myInput事件，這樣model監(jiān)聽myInput才有意義：當(dāng)輸入字符時(shí)觸發(fā)input事件，
// 進(jìn)而派發(fā)觸發(fā)自定義的myInput事件，然后model監(jiān)聽myInput，就實(shí)現(xiàn)了數(shù)據(jù)綁定
this.$emit('myInput', $event.target.value)
},
}
}
</script>到此這篇關(guān)于vue在組件中使用v-model的場(chǎng)景的文章就介紹到這了,更多相關(guān)vue使用v-model內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
這篇文章主要為大家介紹了vite中使用@配置路徑別名過程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索過濾效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
今天小編就為大家分享一篇關(guān)于為什么要使用Vuex的介紹，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
很多朋友不明白在使用vue for時(shí)為什么要key，key的作用有哪些,在文中給大家詳細(xì)介紹，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue 圖片上傳功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue修改滾動(dòng)條樣式,首先要知道，修改滾動(dòng)條樣式，利用偽元素-webkit-scrollbar。下面來看看文章內(nèi)容的具體實(shí)現(xiàn)吧2021-11-11
vue項(xiàng)目中使用html2canvas解決截圖不全的問題
本文主要介紹了vue項(xiàng)目中使用html2canvas解決截圖不全的問題2023-11-11
<script setup>是在單文件組件中使用Composition API的編譯時(shí)語法糖,下面這篇文章主要給大家介紹了關(guān)于vue3:setup語法糖使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09