自定义组件 v-model 的使用

最新推荐文章于 2024-07-02 14:37:41 发布

weixin_34146410

最新推荐文章于 2024-07-02 14:37:41 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongyu/p/10862072.html

本文详细介绍了在Vue中如何使用自定义组件配合v-model实现双向数据绑定。通过两个实例，一是直接使用$emit触发input事件，二是通过自定义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>