目錄

• v-model input中使用雙向繫結資料
  
• 元件中的v-model
  
• 其他寫法
  
• 總結

v-model input中使用雙向繫結資料

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

<template>
   <input type="text" :value="tryText" @input="handelInput">
   <h2>{{tryText}}</h2>
</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>
  <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>

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

這樣我們點選子元件的按鈕就可以改變父元件中的message的資料，這就是一個簡單的元件中的資料雙向繫結v-model實現

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

父元件

<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 },}
    }
}
</script>

子元件不變哦

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

<script>
    export default {
        props:{
            modelValue:String,context){
            function handelClick() {
                context.emit("update:modelValue",}
        }
    }
</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>
  <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"],"O(∩_∩)O哈哈~")
            }
            let customText = computed({
                set(value){
                    context.emit("update:text",value)
          QDzSZND      },get(){
                    return props.text
                }
            })

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

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

總結

到此這篇關於vue3元件中v-model使用以及講解的文章就介紹到這了,更多相關vue3元件v-model使用內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！