vue 組件自定義v-model

 

參考資料：vue官網
在vue 中使用v-model雙向綁定

<input v-model="something">

實際上是語法糖

<input   :value="something"   @:input="something = $event.target.value">

自定義組件使用v-model

//父組件中調用
<child v-model="msg" />

//子組件代碼

<template>
　　<div>
　　　　<slot />
　　</div>
</template>

<script>
export default {
　　name:'child',
　　componentName:'child',
　　data(){
　　　　return {
　　　　　　childVal:null
　　　　}
　　},
//vue中v-model默認綁定的是input事件，value參數，若是須要其餘自定義的事件和數據名做爲綁定，須要設置model
　　model: {
　　　　prop: 'value',
　　　　event: 'change'
　　},
　　props: {
　　　　value: {}
　　},
　　created(){
　　　　this.$emit('change', this.value);
　　},
}

</script>

​