vue中 v-model form中有v-model，自定义组件也有v-model

https://cn.vuejs.org/v2/guide/components-custom-events.html

v-model在一个组件中只能用一次，即只能定义监听一个变量和事件

一下是一个tab切换组件

父组件
<tab v-model="active" @change="change" :list="list"/>

子组件

<!--

运用v-model

change:事件

active: 选中状态

list：数据

-->

<template>

<ul class="mw hcc f28 pc bcf h90">

<li class="hcc f1" @click="$emit('change',item.id)" v-for="item in list" :key="item">

<span class="h90 lh90" :class="active==item.id?'ab tc':'abf'">{{item.title}}</span>

</li>

</ul>

</template>

 

<script>

 

export default {

props: {

active: Number,

list:Array

},

model: {

prop: "active",

event: "change"

},

};

</script>