vue工作开发总结（五）----自定义组件的双向绑定

约定不等于承诺〃 2021-09-08 16:34 285阅读 0赞

组件model：

允许一个自定义组件在使用v-model时定制prop和event 默认情况下，一个组件上的v-model会吧value用作prop且把

input用作event ，但是一些输入类型比如单选框复选框按钮可能想要使用value prop来表达不同的目的。

使用model选项可以回避这些情况产生的冲突

input默认作为双向绑定的跟新事件，通过$emit可以更新绑定的值

<my-switch v-model="val" />
    export detault {
        props:{
            value:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            sitchChange(val){
                this.$emit("input",val)
            }
        }
    }
    
    修改组件的model选项，自定义绑定事件和变量
    <my-switch v-model="num" value="some value" />
    export default {
        model:{
            prop:"num",
            event:"update"
        },
        props:{
            value:{
                type:String,
                value:''
            },
            num:{
                type:Number,
                default:0
            }
        },
        methods:{
            numChange(){
                this.$emit('update',this.num++)
            }
        }
    }

文档：：https://cn.vuejs.org/v2/api/\#model

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关组件的双向绑定

以下会在input、checkbox、select、div组件上分别实现双向绑定： input 在input组件上绑定v-model指令，实现双向绑定：实现思路：

小咪咪/ 2023年06月27日 03:48/ 0 赞/ 3 阅读

相关 Vue自定义双向绑定

父子组件双向绑定v-model > 非表单元素  <template> <h1>{ { mess

太过爱你忘了你带给我的痛/ 2023年06月25日 07:56/ 0 赞/ 23 阅读

相关 vue双向绑定

讲的非常清楚的一篇博客，感谢博主[https://www.jianshu.com/p/e7ebb1500613][https_www.jianshu.com_p_e7ebb15

雨点打透心脏的1/2处/ 2023年05月30日 06:17/ 0 赞/ 29 阅读

相关 Vue--双向绑定

原文网址：[Vue--双向绑定\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 其他网址 > [父子组件prop值的双向绑定][prop] 简

忘是亡心i/ 2022年12月21日 06:24/ 0 赞/ 260 阅读

相关 Vue自定义组件实现v-model双向绑定

核心点： 1.父组件啥也不用干只需要绑定`v-model`值 2.子组件接收绑定的`props`属性必须为`value` 3.子组件`data`中必须`定义一个属性

你的名字/ 2022年11月29日 13:13/ 0 赞/ 181 阅读

相关 Vue双向绑定

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发

清疚/ 2022年11月27日 10:21/ 0 赞/ 236 阅读

相关 VUE双向绑定

1、什么是setter、getter ？　　答：首先，别误以为他们就是一会要说的get、set，我们先看一句定义： > 对象有两种属性：（1）数据属性，

r囧r小猫/ 2022年11月07日 13:16/ 0 赞/ 31 阅读

相关 VUE双向绑定

转自：http://www.cnblogs.com/qiuchuanji/p/8819697.html Vue是一个提供了MVVM风格的双向数据绑定的Javascr

小鱼儿/ 2022年05月23日 08:17/ 0 赞/ 364 阅读

相关 vue父子组件数据双向绑定

1，父组件 <certificate-input :p_model.sync='pname'></certificate-input> 将父组件的值pname传入到

清疚/ 2022年04月12日 11:40/ 0 赞/ 273 阅读

相关 vue工作开发总结（五）----自定义组件的双向绑定

组件model：允许一个自定义组件在使用v-model时定制prop和event 默认情况下，一个组件上的v-model会吧value用作prop且把 input用作ev

约定不等于承诺〃/ 2021年09月08日 16:34/ 0 赞/ 286 阅读