快捷導(dǎo)航

vue3組件中v-model的使用以及深入講解

更新時(shí)間：2021年09月26日 11:33:07 作者：Might°

在vue2中v-model使用的還是挺多的,不過(guò)這個(gè)指令一般是用在了輸入框中,并且這個(gè)指令其實(shí)就是個(gè)語(yǔ)法糖,下面這篇文章主要給大家介紹了關(guān)于vue3組件中v-model的使用以及深入講解的相關(guān)資料,需要的朋友可以參考下

v-model input中使用雙向綁定數(shù)據(jù)

v-model在vue中我們經(jīng)常用它與input輸入框的輸入值進(jìn)行綁定，簡(jiǎn)單的實(shí)現(xiàn)原理大家也應(yīng)該都知道通過(guò)v-bind綁定value值及結(jié)合@input輸入事件動(dòng)態(tài)改變綁定的value值來(lái)實(shí)現(xiàn)雙向綁定，如下vue3實(shí)現(xiàn)代碼:

<template>
   <input type="text" :value="tryText" @input="handelInput">
   <h2>{{tryText}}</h2>
</template>

<script>
import { ref} from "vue"
    export default {
        setup(){
            let tryText = ref("默認(rèn)輸入值")
            function handelInput(e) {
                tryText.value = e.target.value;//ref定義的數(shù)據(jù)訪問(wèn)和修改需要通過(guò).value
            }
            return{
                tryText,
                handelInput
            }
        }
    }
</script>

相信大家經(jīng)常使用v-model在ipnut中，現(xiàn)在讓我們來(lái)看看在組件中如何使用v-model以及它的作用是啥

組件中的v-model

組件中如何使用v-model呢？我們來(lái)簡(jiǎn)單實(shí)現(xiàn)下

父組件

<template>
  <!-- 組件綁定 v-model -->
  <hy-input v-model="message"></hy-input>
  <h2>{{message}}</h2>
</template>

<script>
import {  ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {
  components: {HyInput },
    setup(){
        let message = ref("嘿嘿嘿ヽ(*^ｰ^)(^ｰ^*)ノ")
        return{
            message,
        }
    }
}
</script>

子組件

<template>
   <button @click="handelClick">O(∩_∩)O哈哈~</button>
   <br>
</template>

<script>
    export default {
        props:{
            modelValue:String,
        },
        emits:['update:modelValue'],
        setup(props,context){
            function handelClick() {
                context.emit("update:modelValue","O(∩_∩)O哈哈~")
            }
        
            return{
                handelClick,
            }
        }
    }
</script>

看到這里我們可能會(huì)有點(diǎn)疑點(diǎn) 為啥要發(fā)射事件呢？為啥會(huì)有一個(gè)默認(rèn)的props接收值呢？別急我們從實(shí)現(xiàn)原理上看看就懂了

這樣我們點(diǎn)擊子組件的按鈕就可以改變父組件中的message的數(shù)據(jù)，這就是一個(gè)簡(jiǎn)單的組件中的數(shù)據(jù)雙向綁定v-model實(shí)現(xiàn)

既然是雙向綁定，那不妨大膽猜測(cè)下是否和input中的實(shí)現(xiàn)原理相似呢？讓我們來(lái)看看它的實(shí)現(xiàn)原理

父組件

<template>
  <!-- 原理 -->
  <hy-input :modelValue="message" @update:modelValue="message = $event"></hy-input>
  <h2>{{message}}</h2>
</template>

<script>
import {  ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {
  components: {HyInput },
    setup(){
        let message = ref("嘿嘿嘿ヽ(*^ｰ^)(^ｰ^*)ノ")
        return{
            message,
        }
    }
}
</script>

子組件不變哦

<template>
   <button @click="handelClick">O(∩_∩)O哈哈~</button>
   <br>
</template>

<script>
    export default {
        props:{
            modelValue:String,
        },
        emits:['update:modelValue'],
        setup(props,context){
            function handelClick() {
                context.emit("update:modelValue","O(∩_∩)O哈哈~")
            }
        
            return{
                handelClick,
            }
        }
    }
</script>

通過(guò)結(jié)果我們發(fā)現(xiàn)確實(shí)可以實(shí)現(xiàn)

這樣我們就能很好理解子組件中的發(fā)射事件和默認(rèn)接收值了，基本實(shí)現(xiàn)原理就是：父組件傳值給子組件，子組件通過(guò)props進(jìn)行接收，但是在子組件中需要修改改數(shù)據(jù)時(shí)，我們通過(guò)發(fā)射一個(gè)事件告訴父組件，然后父組件接收傳遞過(guò)來(lái)的值進(jìn)行修改。其實(shí)就是父子組件之間的通信，不過(guò)vue幫我們做了一個(gè)簡(jiǎn)單的封裝。

ps:默認(rèn)v-model綁定的數(shù)據(jù)在子組件讀取需要使用 modelValue來(lái)接收發(fā)射事件默認(rèn)叫update:modelValue ,想綁定多個(gè)值或者采用自定義名請(qǐng)看下面的其他寫(xiě)法哦

ps:不能想通過(guò)修改props來(lái)修改數(shù)據(jù)，首先這是一個(gè)特別不好的開(kāi)發(fā)習(xí)慣，然后我們知道props的特性只是負(fù)責(zé)傳遞數(shù)據(jù)，修改props并不能達(dá)到我們想要的效果。我們應(yīng)該通知父組件進(jìn)行數(shù)據(jù)更新，這才是最好的做法。

其他寫(xiě)法

如果我們子組件中的input和父組件進(jìn)行雙向綁定那該怎么實(shí)現(xiàn)呢？以及需要傳遞多個(gè)雙向綁定數(shù)據(jù)呢？自定義名呢？
父組件

<template>
  <!-- 組件綁定 v-model -->
  <hy-input v-model="message" v-model:text="inputText"></hy-input>
  <h2>{{message}}</h2>
  <h2>{{inputText}}</h2>
</template>

<script>
import {  ref } from '@vue/reactivity'
import HyInput from "../components/HyInput.vue"
export default {
  components: {HyInput },
    setup(){
        let message = ref("嘿嘿嘿ヽ(*^ｰ^)(^ｰ^*)ノ")
        let inputText = ref("嘻嘻嘻嘻")
  
        return{
            message,
            inputText
        }
    }
}
</script>

子組件

<template>
   <button @click="handelClick">O(∩_∩)O哈哈~</button>
   <br>
   <input type="text" v-model="customText">
   <br>
</template>

<script>
import {computed} from "vue"
    export default {
        props:{
            modelValue:String,
            text:String
        },
        emits:['update:modelValue',"update:text"],
        setup(props,context){
            function handelClick() {
                context.emit("update:modelValue","O(∩_∩)O哈哈~")
            }
            let customText = computed({
                set(value){
                    context.emit("update:text",value)
                },
                get(){
                    return props.text
                }
            })

            return{
                handelClick,
                customText,
            }
        }
    }
</script>

多個(gè)綁定值及改名寫(xiě)法 v-model:text=“inputText” 子組件中props直接是 text 發(fā)射事件名是 update:text
這里我們看到為了實(shí)現(xiàn)子組件中輸入框v-model雙向綁定父組件,我們需要借助計(jì)算屬性computed來(lái)實(shí)現(xiàn)，可能有同學(xué)會(huì)想直接綁定props中的text不就可以了嗎？還是上面那句話，若只是讀取確實(shí)可以綁定，但是當(dāng)你修改的時(shí)候是需要通過(guò)發(fā)射事件通知父組件進(jìn)行數(shù)據(jù)更新(不能修改props中的值，只能讀!!!).所以在計(jì)算屬性中我們?cè)趕et中發(fā)射了事件進(jìn)行父組件數(shù)據(jù)更新，讀取時(shí)我們則直接讀取props中的值就好了。