自定义组件实现v-model双向数据绑定

我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定。

//表单控件上使用v-model
<template>
    <input type="text" v-model="name" />
    <input type="checkbox" v-model="checked"/>
    <!--上面的input和下面的input实现的效果是一样的-->
    <input type="text" :value="name" @input="name=e.target.vlaue"/>
    <input type="checkBox" :checked="checked" @click=e.target.checked/>
    {{name}}
</template>
<script>
export default{
    data(){
        return {
            name:"",
            checked:false,
        }
    }
}
</script>

vue中父子组件的props通信都是单向的。父组件通过props向下传值给子组件,子组件通过$emit触发父组件中的方法。所以自定义组件是无法直接使用v-model来实现v-model双向绑定的。那么有什么办法可以实现呢?

//父组件
<template>
  <div>
   <c-input v-model="form.name"></c-input>
   <c-input v-model="form.password"></c-input>
   <!--上面的input等价于下面的input-->
  <!--<c-input :value="form.name" @input="form.name=e.target.value"/>
   <c-input :value="form.password" @input="form.password=e.target.value"/>-->
  </div>
</template>
<script>
import cInput from "./components/Input"
export default {
  components:{
   cInput
  },
  data() {
    return {
      form:{
        name:"",
        password:""
      },
      
    }
  },
}
</script>
//子组件 cInput
<template>
    <input type="text" :value="inputValue" @input="handleInput">
</template>
<script>
export default {
  props:{
    value:{
      type:String,
      default:"",
      required:true,
    }
  },
  data() {
    return {
      inputValue:this.value,
    }
  },
  methods:{
    handleInput(e){
      const value=e.target.value;
      this.inputValue=value;
      this.$emit("input",value);
    },
  }
}
</script>

根据上面的示例代码可以看出,子组件c-input上绑定了父组件form的值,在子组件中通过:value接收了这个值,然后我们在子组件中修改了这个值,并且通过$emit触发了父组件中的input事件将修改的值又赋值给了form。
综上就实现了自定义组件中的双向数据绑定!

Image placeholder
candy
未设置
  51人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue单向数据流介绍

prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外,每次父组件更新时,子组件的所有prop都会更新

上汽集团如何借助云计算走向数字化转型征程?

  李涛上汽集团南京云数据中心负责人,帆一尚行云计算资深架构师上汽优秀工程技术带头人,主要从事上汽集团制造行业云计算领域的设计、研发、运营等工作,将互联网和云计算技术与传统汽车业务相结合。在集团领导支

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

中信银行信用卡业务数据库实现国产替换,湖北银行新核心系统项目正式验收,阿里云与MongoDB达成战略合作

中信银行信用卡业务数据库实现国产替换10月31日,由IT168旗下ChinaUnix社区主办的第十一届中国系统架构师大会(SACC2019)在北京召开。会上,中信银行软件开发中心/技术平台开发处副处长

MongoDB数据库因安全漏洞,导致Family Locator泄露二十多万名用户数据

摘要:本月第二次,未受保护的MongoDB数据库因大量安全漏洞而导致敏感信息泄露,受欢迎的家庭跟踪应用程序FamilyLocator已经暴露了超过238,000名用户的实时未加密位置数据。该应用程序非

Laravel-自定义全局函数-ChinaCircle 优化版

看过很多关于helper辅助文件的教程我进行个进一步优化 很多教程都会说,你在composer.json这个文件中通过添加一个自动加载的文件,就可以实现这个需求。但我认为这不是一个好的方式,当你在he

GoWeb教程_13.2. 自定义路由器设计

HTTP路由 HTTP路由组件负责将HTTP请求交到对应的函数处理(或者是一个struct的方法),如前面小节所描述的结构图,路由在框架中相当于一个事件处理器,而这个事件包括: 用户请求的路径(pat

GORM 中文文档_5.2. 自定义 Logger

Logger Gorm建立了对Logger的支持,默认模式只会在错误发生的时候打印日志。 //开启Logger,以展示详细的日志 db.LogMode(true) //关闭Logger,不再展示任何

Spring Boot 中关于自定义异常处理的套路!

在SpringBoot项目中,异常统一处理,可以使用Spring中@ControllerAdvice来统一处理,也可以自己来定义异常处理方案。SpringBoot中,对异常的处理有一些默认的策略,我们

JSP如何自定义标签

JSP如何自定义标签自定义标签步骤:先定义标签处理类(如继承SimpleTagSupport类),再编写TLD文件(标签库描述库文件)。定义标签类可以编写一个实现SimpleTag接口的类,publi

使用Go语言在MacOS创建一个自定义的命令行工具

原文链接:https://idoubi.cc/posts/create-a-cli-tool-in-macos/ 使用MacOS做开发的朋友都知道,我们一般会使用Homebrew做软件包管理,经常会用

小知识-SQL 自定义排序

问题场景在一次写业务的过程中,发现在使用sql查询数据的时候,不是按照我希望的顺序进行排序的,而是根据系统顺序进行排序的.o(╥﹏╥)oSELECT*FROMtable_nameWHEREidin(3

自定义列表

自定义列表: 一般用于对术语或者名词的揭示和描述. 格式: ........

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

node_modules是什么文件夹?

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。npminstall执行完毕后,我们可以在node_modules中

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

学习 nodejs+mongodb+koa2 写接口(一) 环境布置

一.环境准备最近在学用Nodejs写后端接口,了解到koa2是Nodejs的一个框架。可以快速开发后端接口,同时也能更快熟悉Nodejs以下是所需的环境node  v7.6+,可以用nvm或者n安装指

学习 nodejs+mongodb+koa2 写接口(二) koa2教程入门

一.hellokoa安装koa2#初始化package.json npminit #安装koa2 npminstallkoahelloworld代码constKoa=require('koa') c

Laravel 7 的简单隐式路由模型绑定

在2020年二月份即将到来的Laravel的下一个主要发行版本 ,你可以直接在路由定义中自定义隐式路由模型绑定:Route::get('/posts/{post:slug}',function(Pos

使用kubei一步部署k8s高可用集群(包含docker安装、k8s组件安装、master初始化和加入nodes节点)

kubei(kubernetesinstaller)是一个go开发的用来部署kubernetes高可用集群的命令行工具,该工具可在Windows、Linux、Mac中运行kubei原理:通过ssh连接

jQuery怎么绑定事件?

jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一、bind()b

如何绑定一二级菜单

二级菜单的pid为一级菜单的idforeach判断pid是否为0为0输出数组,并遍历pid为当前父级id,同时输出数组