自定义组件 v-model 的使用

佚名 6年前 (2019-05-14) 随笔 1363人围观抢沙发百度已收录

关于自定义组件如何使用 v-model，本章直讲如何使用：

一、 $emit('input', params)

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

// 父组件中
<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>