vue3組件中v-model的本質與以及用法是怎樣的

這篇文章將為大家詳細講解有關vue3組件中v-model的本質與以及用法是怎樣的，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

v-model input中使用雙向綁定數據

v-model在vue中我們經常用它與input輸入框的輸入值進行綁定，簡單的實現原理大家也應該都知道 通過v-bind綁定value值 及結合@input輸入事件動態改變綁定的value值來實現雙向綁定，如下vue3實現代碼:

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

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

相信大家經常使用v-model在ipnut中，現在讓我們來看看在組件中如何使用v-model以及它的作用是啥

組件中的v-model

組件中如何使用v-model呢？我們來簡單實現下

父組件

<template>
  <!-- 組件綁定 v-model -->
  <hy-input v-model="message"></hy-input>
  <h3>{{message}}</h3>
</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>

看到這里我們可能會有點疑點 為啥要發射事件呢？為啥會有一個默認的props接收值呢？別急我們從實現原理上看看就懂了

這樣我們點擊子組件的按鈕就可以改變父組件中的message的數據，這就是一個簡單的組件中的數據雙向綁定v-model實現

既然是雙向綁定，那不妨大膽猜測下是否和input中的實現原理相似呢？讓我們來看看它的實現原理

父組件

<template>
  <!-- 原理 -->
  <hy-input :modelValue="message" @update:modelValue="message = $event"></hy-input>
  <h3>{{message}}</h3>
</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>

通過結果我們發現確實可以實現

這樣我們就能很好理解子組件中的發射事件和默認接收值了，基本實現原理就是：父組件傳值給子組件，子組件通過props進行接收，但是在子組件中需要修改改數據時，我們通過發射一個事件告訴父組件，然后父組件接收傳遞過來的值進行修改。其實就是父子組件之間的通信，不過vue幫我們做了一個簡單的封裝。

ps:默認v-model綁定的數據在子組件讀取需要使用 modelValue來接收 發射事件默認叫update:modelValue ,想綁定多個值或者采用自定義名請看下面的其他寫法哦

ps:不能想通過修改props來修改數據，首先這是一個特別不好的開發習慣，然后我們知道props的特性只是負責傳遞數據，修改props并不能達到我們想要的效果。我們應該通知父組件進行數據更新，這才是最好的做法。

其他寫法

如果我們子組件中的input和父組件進行雙向綁定那該怎么實現呢？以及需要傳遞多個雙向綁定數據呢？自定義名呢？
父組件

<template>
  <!-- 組件綁定 v-model -->
  <hy-input v-model="message" v-model:text="inputText"></hy-input>
  <h3>{{message}}</h3>
  <h3>{{inputText}}</h3>
</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>

多個綁定值及改名寫法 v-model:text=“inputText” 子組件中props直接是 text 發射事件名是 update:text
這里我們看到為了實現子組件中輸入框v-model雙向綁定父組件,我們需要借助計算屬性computed來實現，可能有同學會想直接綁定props中的text不就可以了嗎？還是上面那句話，若只是讀取確實可以綁定，但是當你修改的時候是需要通過發射事件通知父組件進行數據更新(不能修改props中的值，只能讀!!!).所以在計算屬性中我們在set中發射了事件進行父組件數據更新，讀取時我們則直接讀取props中的值就好了。

關于vue3組件中v-model的本質與以及用法是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。