自定義組件的 v-model 和 .sync 修飾符其實本質上都是vue的語法糖，用于實作父子組件的“資料”雙向系結.
Vue中的 props 是單向向下系結的，即：每次父組件更新時，子組件中的所有 props 都會重繪為最新的值，但是如果在子組件中修改 props ，Vue會向你發出一個警告、報錯，這就形成了一個單向資料流，因此我們可以在父組件使用子組件的標簽上宣告一個監聽事件，在子組件想要修改時使用 $emit 觸發事件并傳入新的值，讓父組件進行修改，
.sync修飾符
.sync 修飾符添加于 v 2.4，其實就是父組件監聽子組件更新某個props的請求的縮寫語法
例如：
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>這段代碼用 .sync 修飾符寫的話：
<text-document v-bind:title.sync="doc.title"></text-document>子組件中，可以通過下面代碼來實作對這個prop重新賦值的意圖：
this.$emit('update:title', newTitle)當我們想一個物件同時設定多個 prop 的時候，也可以將這個. sync 修飾符和 v-bind 配合使用：
<text-document v-bind.sync="doc"></text-document> 這樣會把doc物件中的每一個 property (如 title) 都作為一個獨立的 prop 傳進去，然后各自添加用于更新的 v-on 監聽器，
v-model本質
v-model是用來在表單控制元件或者組件上創建雙向系結的，他的本質是v-bind和v-on的語法糖，在一個組件上使用v-model，默認會為組件系結名為value的prop和名為input的事件，
<input type="text" :value="name" @input="name=$event.target.value">
<!--等同于<input type="text" v-model="name">-->父組件：
<template>
<div class="">
<p>{{ name }}</p>
<son v-model="name"></son>
<!--等同于 <son type="text" :value="name" @input="name=$event"/> -->
</div>
</template>
<script type="text/javascript">
import Son from "./components/son";
export default {
name: "",
data() {
return {
name: "sheben",
};
},
components: {
Son,
},
};
</script>子組件：
<template>
<div class>
<input
type="text"
:value="value"
@input="$emit('input', $event.target.value)"
/>
</div>
</template>
<script type="text/javascript">
export default {
name: "",
props: {
value: {
type: String,
defalut() {
return "";
},
},
},
data() {
return {};
},
components: {},
};
</script>.sync 從功能上看和 v-model 十分相似，都是為了實作資料的“雙向系結”，本質上，也都不是真正的雙向系結，而是語法糖，
相比較至下，.sync 會更加靈活，它可以給多個prop使用
從語意上來看，v-model 系結的值是指這個組件的系結值，比如 input 組件，select 組件，日期時間選擇組件，顏色選擇器組件，這些組件所系結的值使用 v-model 比較合適，其他情況，沒有這種語意，個人認為使用 .sync 更好，
兩者都需要手動觸發 $emit 方法.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/321289.html
標籤：其他
上一篇：webpack介紹及使用
下一篇：Vue Router的基本知識