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