vue2 组件v-model

1. 默认情况

v-model="visible"  等价于 :value="visible" 加上 @input="visible = $event"

所以 v-model 就是父组件向子组件传了个 value 字段的值，子组件使用 props 定义 value 字段， 就可以在子组件使用 value 读取这个值；子组件使用 $emit('input',值) 就可以改变 v-model 的值。

父组件

<Chlid v-model="visible" />


<script>
export default {
   data() {
    return {
      visible: true,
    }
   }
}
<script/>

子组件

<template>
    <div v-show="value">
        我是子组件文字
        <button @click="$emit('input',false)">关闭</button>
    </div>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
}
</script>

2. 子组件改变默认字段名与事件

父组件

<Chlid v-model="visible" />


<script>
export default {
   data() {
    return {
      visible: true,
    }
   }
}
<script/>

子组件

<template>
    <div v-show="show">
        我是子组件文字
        <button @click="$emit('change',false)">关闭</button>
    </div>
</template>

<script>
export default {
    model: {
       prop: "show",
       event: "change",
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
}
</script>

子组件定义了以下代码就回改变默认字段

    model: {
       prop: "show",
       event: "change",
    }

此时，v-model="visible"  等价于 :show="visible" 加上 @change="visible = $event"