一、v-model 雙向綁定

1.v-model的理解：

1、v-model實(shí)現(xiàn)原理
2、自定義組件使用v-model

2.v-model原理:
在vue中，對(duì)<input>標(biāo)簽使用v-model指令可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定；其原理是利用<input>標(biāo)簽的value屬性和input事件；

下面是我們使用v-model的方式：

<input v-model= "inputVal"  type="text">
<div class="show-panel">{{inputval}}</div> 

export default {
data() {
     return {
            inputVal:  ' '
         }
     }
}

效果如下：

20200114142402735.gif

為了更好的理解v-model的原理，我們先模擬v-model的實(shí)現(xiàn):

利用vue模擬v-model的實(shí)現(xiàn)：

< input :value="inputVal" type="text" @input=" inputVal = $event.target.value">
<div class="show- panel">{{ inputVal }}</div>

為<input>標(biāo)簽添加了value屬性以及input事件，當(dāng)我們在輸入內(nèi)容時(shí)，觸發(fā)input事件，將<input>標(biāo)簽中的值賦給inputVal變量。

原生js模擬v-model的實(shí)現(xiàn)

<input id="input" type="text" oninput= "handleInput()">
<div class=" show- panel"></div>
let inputEle = document. queryselector( ' #input ' )
let showPanelEle = document. querySelector( ' .show- panel ' )
let inputval =  ''
//將inputVal 的值賦給input標(biāo)簽的value屬性
inputEle.value = inputVal
function handleInput() { 
//獲取input標(biāo)簽的value屬性值，并賦給inputVal、 showPanelEle
inputval = inputEle.value 
showPanelEle.innerHTML = inputEle.value
}

最開始將inputVal的值賦給<input>標(biāo)簽的value屬性，當(dāng)輸入內(nèi)容時(shí)，觸發(fā)input事件，獲取<input>標(biāo)簽中最新的value屬性值，并將輸入值賦給inputVal變量和showPanelEle元素。

結(jié)合上面v-model的實(shí)現(xiàn)，可以看出v-model利用了表單元素（<input>）的value屬性和input事件，通過定義一個(gè)變量inputVal，并將inputVal賦給表單元素的value屬性，當(dāng)觸發(fā)表單元素的input事件時(shí)將最新的輸入值更新給變量inputval，進(jìn)而實(shí)現(xiàn)雙向綁定。

自定義組件使用v-model

我們知道表單元素本身具有input事件，在輸入內(nèi)容時(shí)，可以觸發(fā)，但是在vue中，對(duì)于自定義組件，當(dāng)自身沒有input事件時(shí)，還可以使用v-model嗎？

答案是可以使用的，對(duì)于自定義組件，當(dāng)我們使用v-model后，組件會(huì)自動(dòng)多了一個(gè)value屬性值和名為input的自定義事件（這一切都是vue幫我們實(shí)現(xiàn)的），具體如下：

如下是一個(gè)HelloWorld.vue組件：

// HelloWord.vue 
< template>
<div>
<h1>{{ value }}</h1>
<button @click="handleClick" >點(diǎn)擊更新文本</button>
</div>
</template>

<script>
export default {
name: Helloworld,
props: {
     value: {
            type: string,
                   default: '',
      }
},
methods: {
        handleClick() {
},
         this.$emit(' input', 'Hi, Vue')
}
</script>


<!-- Add "scoped" attribute to limit CSS  to this component only  -->
<style scoped>
<style>

我們在使用HelloWorld.vue組件時(shí)候用了v-model

<hello-world v-model="inputval">< /hello-world>

< script>
import HelloWorld from './components/Helloworld.vue
export default {
name : 'app',
components: {
    HelloWorld
},
data() {
       return {
           inputval: 'hello, V-model'
    }
}
</script>

我們在HelloWorld.vue中可以獲取一個(gè)名為value的屬性，當(dāng)我們需要改變該屬性值時(shí)，通過觸發(fā)一個(gè)名為input的自定義事件即可，這就是在自定義組件中使用v-model的方法。

效果如下：

hello.gif

如果不使用v-model還想達(dá)到相同的效果，我們需要這樣做：

<hello-world :value="inputVal" @input="handleInput"></hello-world>
import HelloWorld from ' ./components /Helloworld.vue
export default {
name : 'app'，
components: { 
HelloWorld,
   data() {
       return {
            inputval: ' hello, v-model '
      }
},
methods: {
      handleInput(val) {
           this. inputVal = val
}

綜上所述，我們可以知道v-model是一種語法糖，它利用了標(biāo)簽（表單元素、自定義元素）的value屬性和input事件（對(duì)于表單元素，input事件是本身原有的事件，對(duì)于自定義組件，input事件就是一個(gè)名為input的自定義事件）實(shí)現(xiàn)了雙向綁定。