Vue中指令v-model的原理及使用方法

更新時間：2024年09月23日 10:35:25 作者：青青青青草地

v-model是Vue中的一個重要語法糖,主要用于實現(xiàn)數(shù)據(jù)的雙向綁定,它通過結(jié)合value屬性和input事件,簡化了代碼并提高了開發(fā)效率,文中通過代碼介紹的非常詳解,需要的朋友可以參考下

v-model的原理

原理：v-model本質(zhì)上是一個語法糖。例如應(yīng)用在輸入框上，就是value屬性和input事件的合寫。

作用：提供數(shù)據(jù)的雙向綁定

數(shù)據(jù)變，視圖跟著變 :value
視圖變，數(shù)據(jù)跟這變 @input

注意：$event用于在模板中獲取事件的形參。

<template>
	<div id="app">
    	<input v-model="msg" type="text">
    <input :value="msg" @input="msg = $event.target.value" type="text" name="" id="">
  	</div>
</template>

表單類組件封裝 & v-model簡化代碼

表單類組件封裝

父傳子：數(shù)據(jù)應(yīng)該是父組件props傳遞過來的，v-model拆解綁定數(shù)據(jù)

子傳父：監(jiān)聽輸入，子傳父傳值給父組件修改

父組件（使用）：
```
<BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>
```
子組件（封裝）：
```
<select :value="cityId" @chang="handleChange">...</select>
```
```
props: {
	cityId: String
},
```
```
methods: {
	handleChange (e) {
		this.$emit('事件名', e.target.value)
	}
}
```
父組件v-model簡化代碼，實現(xiàn)子組件和父組件數(shù)據(jù)雙向綁定。

子組件中：props通過value接收，事件觸發(fā)input

父組件中：v-model給組件直接解綁數(shù)據(jù)（:value+@input）

父組件（使用）：
```
<BaseSelect v-model="selectId"></BaseSelect>
```
子組件（封裝）：
```
<select :value="cityId" @chang="handleChange">...</select>
```
```
props: {
	value: String
},
methods: {
    handleChange (e) {
        this.$emit('input', e.target.value)
    }
}
```

附：v-model結(jié)合radio類型使用

radio單選框的屬性是互斥的，如果使用v-model，可以不使用name就可以互斥。

v-model綁定sex屬性，初始值為“男”，選擇女后sex屬性變成“女”，因為此時是雙向綁定。

 <div id="app">
    <!-- name屬性radio互斥 使用v-model可以不用name就可以互斥 -->
    <label for="male">
      <input type="radio" id="male" name="sex" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女
    </label>
    <div>你選擇的性別是：{{sex}}</div>
 
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"zzz",
        sex:"男"
      },
 
    })
  </script>