Vue中的數據綁定

綁定數據有三種方式：

• 插值，也就是{{name}}的形式，以文本的形式和實例data中對應的屬性進行綁定
• v-bind
• v-model

---

v-bind

eg：v-bind:class 可簡寫為 :class

當加上v-bind:之后，它的值classe不是字符串，而是vue實例對應的data.class的這個變量。也就是說data.class是什么值，它就會給class屬性傳遞什么值，當data.class發生變化的時候，class屬性也發生變化，這非常適合用在通過css來實現動畫效果的場合。他只是單向變動

v-bind支持的類型

html中的屬性、css的樣式、對象、數組、number 類型、bool類型

v-bind使用

//?綁定文本
<p?v-bind="message">p>

//?綁定屬性

<p?v-bind:src="http://....">p>
<p?v-bind:class="http://....">p>
<p?v-bind:style="http://....">p>
//?綁定表達式
:class{className:true}

v-model

v-model 指令在表單 、 及 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽用戶的輸入事件以更新數據，并對一些極端場景進行一些特殊處理

主要是用在表單元素中，它實現了雙向綁定。在同時使用v-bind和v-model中，v-model建立的雙向綁定對輸入型元素input, textarea, select等具有優先權，會強制實行雙向綁定。很多時候v-model使用在表單的中實現雙向綁定。

v-model實現了表單輸入的雙向綁定，一般是這么寫的：

?<div?id="app">
?????<input?v-model="price">
?div>
<script>new?Vue({el:?'#app',data:?{price:?''
????????}
????});script>

通過該語句實現price變量與輸入值雙向綁定

實際上v-model只是一個語法糖，真正的實現是這樣的：

<input?type="text"?:value="price"?
??????@input="price=$event.target.value">

以上代碼分幾個步驟：

• 將輸入框的值綁定到price變量上，這個是單向綁定，意味著改變price變量的值可以改變input的value，但是改變value不能改變price

• 監聽input事件(input輸入框都有該事件，當輸入內容時自動觸發該事件)，當輸入框輸入內容就單向改變price的值

這樣就實現了雙向綁定。

即

<input?v-model="giveDate"?/>
<input?:value="giveDate"?@input="giveDate?=?$event.target.value"?/>?

第一行的代碼其實只是第二行的語法糖。

vue2中v-model用法

不使用v-model的雙向綁定

如下代碼所示，這是不用v-model時候的寫法。

父組件使用v-bind給子組件中的props傳值。

子組件需要使用emit方法來實現子組件---->父組件方向上的綁定。

父組件

<template>
????<div>
????????
????????<search?@test="getData"?:keywords="keywords">search>
????????<button?@click="submit">提交button>
????div>
template>
<script>import?search?from?'@/components/index/search.vue'export?default?{
????data()?{return?{keywords:?''
????????}
????},components:?{
????????search
????},methods:?{//?在這里實現更改父組件的值
????????getData(val){this.keywords?=?val
????????},
????????submit()?{console.log('keywords:',?this.keywords)
????????}
????}
}script>

子組件

<template>
????<div>
????????<input?@input="inputChange"?type="text"?name="keywords">
????div>
template>
<script>export?default?{props:?['keywords'],methods:?{
????????inputChange(e)?{//?傳給父元素的test函數this.$emit('test',?e.target.value)
????????}
????}
}script>

即，在父組件中，通過v-bind給子組件傳參，同時指定v-on和指定修改目標值的函數。

在子組件中，接受父組件v-bind傳過來的值，實現父->子方向上的綁定，然后通過emit方法，向父組件傳出$event.target.value，實現子->父方向上的綁定。

使用v-model后

父組件

<template>
??<div?class="parent"><p>父組件將傳遞給子組件的數據是：
????<input?type="text"?v-model="giveChildData"/>p>
????<Child?v-model="giveChildData">Child>
??div>
template>
<script>import?Child?from?'./Child.vue';export?default?{name:?"Father",
??data()?{return?{todosth:?0,giveChildData:?'兒子，爸要把家產傳給你啊！'
????};
??},components:?{
????Child
??}
}script>

子組件

<template>
??<div?class="child">
????<p>子組件將通過$emit調用父組件的函數并修改數據：{{ give }}p>
????<span?@mousemove="returnBackFn">答復span>
??div>
template>
<script>export?default?{name:?"Child",props:?{give:
????????{type:?String,default:?'0'
????????}
??},model:?{prop:?'give',event:?'returnBack'
??},methods:?{
????returnBackFn()?{this.$emit('returnBack',?'啥家產？有礦啊！');
????}
??}
};script>

這里的 giveChildData 的值將會傳入這個名為 give 的 prop。同時當 觸發一個 returnBack 事件并附帶一個新的值的時候，這個 giveChildData 的屬性將會被更新。

問題

但是當有多個數據需要父子組件之間雙向綁定時，v-model只能傳其中一個值。這時候需要使用.sync來實現其他數據的綁定。

.sync

從 2.3.0 起，vue重新引入了 .sync 修飾符，但是這次它只是作為一個編譯時的語法糖存在。它會被擴展為一個自動更新父組件屬性的 v-on 監聽器。示例代碼如下：

<comp?:foo.sync="bar">comp>

會被擴展為：

:foo="bar"?@update:foo="val?=>?bar?=?val">

當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

this.$emit('update:foo',?newValue)

實例如下。(彈窗的關閉事件)

<template>
??<div?class="details">
????<myComponent:show.sync='valueChild'style="padding:?30px?20px?30px?5px;border:1px?solid?#ddd;margin-bottom:?10px;"
????>
????myComponent>
????<button?@click="changeValue">togglebutton>
??div>
template>
<script>import?Vue?from?'vue'
Vue.component('myComponent',?{template:?`

默認初始值是{{?show?}}，所以是顯示的

關閉`,props:?['show'],methods:?{
????????closeDiv()?{this.$emit('update:show',?false);?//觸發?input?事件，并傳入新值
????????}
??????}
????})export?default?{
??data()?{return?{valueChild:?true,
????}
??},methods:?{
????changeValue()?{this.valueChild?=?!this.valueChild
????}
??}
}script>

效果如下圖。

img

vue2中使用v-model + .sync

由于v-model只能默認傳進去一個值，剩下的需要使用.sync實現雙向綁定。

對于v-model傳進來的數，子組件用emit方法向父組件的“input”傳值(注：是v-model默認監聽的方法)。

而對于.sync傳進來的數，則是通過在子組件中，使用emit向父組件的update:綁定數據名，進行傳值(注：默認提供了update方法，當然也可以自己在父組件中自定義一個修改綁定值的函數)。

父組件

<h1>name01:{{?name01?}}?h1>
<h1>age01:{{?age01?}}?h1>
<model01:model="age01":name.sync="name01"
?????????>
model01>
...

<script>export?default{
????data(){return{age01:?18,name01:?"username"
????????}
????}
}script>

子組件

<template>
??<div?class="custom-input">
????<h1>vue2中的v-modelh1>
????<inputtype="text":value="age"
????????@input="$emit('input',?$event.target.value)"
????/>
????
????<br>
????<input?type="text"?:value="name"?@input="$emit('update:name',?$event.target.value)"/>
?????
??div>
template>

<script>export?default?{name:?"Model01",props:?['age','name'
??],model:{
??}methods:?{
??}
}script>

<style?scoped>

style>

vue3中v-model的使用

接下來就是正點了。

父組件

vue3中，將之前的v-model和.sync整合到一起了，并淘汰了.sync寫法。

現在，v-model在組件之間的使用再也不用像以前那樣臃腫了，極其舒爽。

只需要在v-model上指定傳值。例如：

<model02v-model:age="age02"v-model:name="name02"
?>model02>

這里就是將父組件中的age02變量傳入到子模塊的props中的age變量中。

子組件只要使用如下調用update:age的方式，就能將age的變化由子組件的age傳入到父組件的age02變量上。

$emit('update:age',?傳給父組件的值);
....
<h1>name02:{{?name02?}}?h1>
<h1>age02:{{?age02?}}?h1>

<model02v-model:age="age02"v-model:name="name02"
?>model02>
....

子組件

<template>
??<div?class="custom-input">
????<h1>vue3中的v-modelh1>
????<input?type="text"?:value="age"?@input="onAgeInput"/>
????<br>
????<input?type="text"?:value="name"?@input="onNameInput"/>
??div>
template>

<script>export?default?{name:?"Model02",props:?['age','name'
??],methods:?{
????onAgeInput(e)?{this.$emit('update:age',?parseFloat(e.target.value));
????},
????onNameInput(e)?{this.$emit('update:name',?e.target.value)
????}
??}
}script>

<style?scoped>

style>

實現效果圖：

img

總結

vue3中的v-model比以前舒爽太多了！

ps:vue3中推薦使用的是setUp()寫法，上面這種格式只是為了和vue2做對照，只是為了凸顯vue3中對v-model的改進，僅供參考。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。