自定義組件 v-model 的使用

關於自定義組件如何使用 v-model，本章直講如何使用：

一、 $emit('input', params) 

// 父組件中
<template>
    <article>
        {{flag}}
        <button @click="flag = !flag">點擊</button>
        <Child v-model="flag"></Child>
    </article>
</template>
<script>
    import Child from ‘./child'
    export default {
        data:function(){
            return{
                flag: true,
            }
        },
        components:{
            Child
        }
    }
</script>

//子組件中
<template>
    <article>
        {{value}}
        <Button @click="$emit('input',!value)">點擊</Button>
    </article>
</template>
<script>
export default {
    props:{
        value: Boolean,    
    }
}
</script>

二、通過在model屬性中自定義事件：

//父組件中；
<template>
    <article>
        {{flag}}
        <button @click="flag = !flag">點擊</button>
        <Child v-model="flag"></Child>
    </article>
</template>
<script>
import Child from './child'
export default {
    data:function(){
        return{
            flag: true,
        }
    },
    components:{
        Child
    }
}
</script>

//子組件中：
<template>
    <article>
        {{flag}}
        <Button @click="$emit('on-visible-change', !flag)">點擊</Button>
    </article>    
</template>
<script>
export default {
    props:{
        flag: Boolean,
    },
    model: {
        prop: 'flag',
        event: 'on-visible-change',
    },
}
</script>