v-model可以简单理解为一个value和一个input事件 sync可以简单理解为一个修饰符,可以把子组件的数据更新到父组件
调用:
<caseCode v-model="caseCode" :list.sync="list"></caseCode>
data(){
caseCode:100,
list:[
{id:0,time:new Date().getHours()+":"+new Date().getMinutes()+":"+new Date().getSeconds()},
]
}
caseCode组件
<template>
<div class="case">
<h2>值:{{value}}</h2>
<button @click="monitorCase">+</button>
<hr/>
<button @click="updateValue">添加数据</button>
<h6 v-for="v in list" :key="v.id">
时间:{{v.time}}
</h6>
</div>
</template>
<script>
export default {
name: "case",
props:{
value:{
type:Number,
default:0
},
list:{
type:Array,
default:function (){
return []
}
}
},
methods:{
monitorCase(){
this.$emit('input',this.value+1)
},
updateValue(){
this.$emit('update:list',[
...this.list,
{id:this.list[this.list.length-1].id+1,time:(function(t){return t.getHours()+":"+t.getMinutes()+":"+t.getSeconds()})(new Date())}
]
)
}
}
};
</script>
用于:组件封装、传参、父子组件数据更新