日拱一卒-Vue中自定义组件如何实现v-model

加密通信
• 阅读 794

前几天面试的时候被问到了这个问题,不会。
今天工作的时候刚好有需求要用到,研究了一下。

首先要明白,所谓的v-model实际上是一个语法糖。

<child v-model="value"></child>

等于

<child :value="value" @input="someHandler"></child>

因此,我们需要在子组件中,使用props来接收value,以及用this.$emit来传值出去。
在子组件中的写法是这样子的:

// 这里props不推荐这种写法,只是demo使用
props: ["value"],
// 通过props拿到数据后,不要直接使用,而是要放在computed里面使用才是比较规范的写法
computed: {
    computedValue: {
        get(){
            return this.value;
        },
        set(value){
            this.$emit("input",value);
        }
    }
}
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
4年前
vue3中基于script setup语法糖的$refs使用
在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用scriptsetup语法糖,原先vue2的语法已经不适用了。于是一番折腾和查阅资料,终于搞定。vue2语法vue2语法在组件上设置ref属性后,在代码里可以通过this.$refs.ref值访问到对应的子组件。一个设置ref值的组件:html在js代码中可以通
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
九路 九路
5年前
Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗?
有关系吗?没关系,面试的时候总会问如何在Vue的实例上挂载一个方法/属性,也就是Vue.prototype的小技巧,但是突然有人问他俩有啥关系还真是新鲜.(https://imghelloworld.osscnbeijing.aliyuncs.com/8accd67b8a68646ac4d99fd7297e0fbc
Easter79 Easter79
4年前
vue element
1.真正理解vmodelinput元素上的vmodel其实是一个语法糖,其真正作用有两个:(1)创建一个props,其键为value;(2)监听input事件,改变value。键名与事件名都可以另外设置。当定义一个组件时,vmodel是绑定在input的外层的,所以需要手动实现vmodel。2.provide/injectprov
Stella981 Stella981
4年前
Python Challenge Level 18
初学Python,挑战一下流行的PythonChallenge,很不幸,卡在了18关~~被字符字节码之间的转换搞得焦头烂额,不过终于搞定了还是很happy的~~~主要的问题就是16进制形式的字符如何转成字节码(注意:不是encoding)如:\'89','50','4e','47','0d','0a','1a','0a','00
Wesley13 Wesley13
4年前
Java获取接口所有实现类的方式
<prestyle"color:orange"原作者:heaven夏链接:https://www.cnblogs.com/heaveneleven/p/9125228.html</pre有时候,根据业务逻辑的需求,我们想要获取到某个接口的所有实现类。在这里大致介绍两种方式:1\.借助Spring容器实现Spring作为一个
Easter79 Easter79
4年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
4年前
2021全网最新、最全面“互联网大厂面试题库2400页”春招必备!
其实不管什么时候,找工作都跑不了面试。目前很多小编都做了面试手册了,那就是别人家的孩子都有糖了,作为一个自觉的小编,必须搞。容我先絮叨一下,制作这个面试手册差不多花了3个多星期时间,过程还是比较磨人的,但是也很期待。要是因为我做的手册,帮助到了大家,那就真的开心啊!这就是这篇文章的目的,帮你搜集了大量的面试题,已经整理成了一个Java面试手册PDF,
Easter79 Easter79
4年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
4年前
Hibernate纯sql查询结果和该sql在数据库直接查询结果不一致
问题:今天在做一个查询的时候发现一个问题,我先在数据库实现了我需要的sql,然后我在代码中代码:selectdistinctd.id,d.name,COALESCE(c.count_num,0),COALESCE(c.count_fix,0),COALESCE(c
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这