大家可能在使用vue的時候已經很熟悉v-model指令了，但是有定製過prop和event嗎？下面咱們來簡單的說一說。
vue允許一個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下，一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入型別比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。
下面通過src引入vue.js檔案的方式來簡單實現一下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">
<my-input v-model="isChecked" value="some value">喜歡學習vue</my-input>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
Vue.component('my-input', {
template: `<div>
<input type="checkbox" :checked="check" @change="$emit('change',$event.target.checked)">
<slot></slot>
</div>`,
model: {
prop: 'check',
event: 'change'
},
props: {
value: String,
check: 0 // isChecked的值會傳遞給model指定prop 'check'
}
})
var app = new Vue({
el: '#app',
data: {
isChecked: 0
},
watch: {
isChecked: function(val) {
console.log('val', val); // 選中/取消選中checkbox會改變isChecked的值
}
}
})
</script>
通過手動選中/取消選中checkbox會觸發watch監聽，從而不斷列印isChecked的當前值。也可以在F12控制檯通過給app.isChecked = true/false，來檢視checkbox選中和取消選中的效果。至此一個定製prop和event的示例已經完成~~~
最後給大家準備了一些前端資料分享給大家，如圖~