首页 > 其他分享 >有封装过v-model相关的双向绑定组件吗?

有封装过v-model相关的双向绑定组件吗?

时间:2022-11-04 21:45:23浏览次数:38  
标签:封装 绑定 value 事件 组件 input model

有的,之前在做⼀个通⽤的上传组件的时候,⼀开始是通过传统的⽗⼦通信实现的,⽗传⼦实现的图⽚ 回显,⼦传⽗实现的图⽚url抛出传给给接⼝,后来使⽤v-model做了⼀点优化,简单了不少

追问: 具体是怎么做的,⼤概说⼀下步骤

我想想哈,⼤概是我们知道v-model是⼀个语法糖,当你在⼀个组件上写了v-model绑定了某个字段,这 个时候其实它悄悄做了三个事⼉

  1. 给组件绑定了value的属性

  2. 给组件绑定了input的事件

  3. 事件触发时参数的⾃动赋值

那基于这三个事⼉,我们就可以把原本需要⾃⼰绑定给组件的prop⼲掉,直接去组件⾥接受value的属 性,也可以把之前需要⼿动绑定的事件⼲掉,直接在组件中通过$emit触发input事件,甚⾄最后事件传 出来的最新的值赋值的事⼉也不⽤⼲了

标签:封装,绑定,value,事件,组件,input,model
From: https://www.cnblogs.com/zhulongxu/p/16859202.html

相关文章

  • 小米路由器绑定迅雷失败
    本文地址https://www.cnblogs.com/wanger-sjtu/p/16859177.html在公司或者其它地方上网,发现网上的优秀资源,却发现自己身边没有移动存储设备来下载。这时候如果在家里事......
  • 怎么根据token的有⽆去控制路由的跳转?进度条跳转 - 白名单是否有token - 单独封装文
    vue这边的路由⾃带了路由前置守卫,我们可以在前置守卫⾥拿到token数据,然后根据需求做分⽀判断,要是token存在就使⽤next⽅法正常放⾏跳转,否则可以强制跳回到登录,让⽤户去获......
  • Vue 二 --数据绑定
    Vue中有2种数据绑定的方式:1.单向绑定(v-bind):数据只能从data流向页面。2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。备注:......
  • 封装几个有用的 Vue3 组合式API
    https://juejin.cn/post/6888925879243079687本文将介绍如何使用Vue3来封装一些比较有用的组合API,主要包括背景、实现思路以及一些思考。就我自己的感觉而言,Hook与Compos......
  • vue中封装的常用方法(全部干货)
    引言:在我们要经常使用一些工具函数的时候,如果每次用到都得定义或者引入是不是很麻烦,封装好一个全局的吧公共方法十分必要,这将会大大节省工作量,而且收集的多了以后也能用的到......
  • 常用的前端JavaScript方法封装
    1、输入一个值,返回其数据类型**functiontype(para){returnObject.prototype.toString.call(para)}2、数组去重functionunique1(arr){return[...newS......
  • el-dialog 或dialog 封装 通过js控制
    1.通用组件封装dialogImg.vue<template><div><el-dialogv-show="isShow":visible.sync="isShow"width="50%"@close="seePicUrl='......
  • django,models批量删除
    批量删除使用__intry:case_stepid=request.POST.get('case_stepid','')case_stepids=request.POST.get('case_stepids','')......
  • 二次封装 Vue-Treeselect 组件
    场景开发中多个地方都需要用到vue-treeselect组件,于是想二次封装成SelectTree组件便于使用。需求1:自定义选项样式插槽option-labelSelectTree组件预留插槽`diy-......
  • Vue双向绑定理解与模拟
    title:Vue双向绑定理解与模拟1.Vue的双向绑定理解先从单向绑定进行理解,单向绑定就是将Model(data)绑定到视图层View,当我们使用JS更新Model数据层时,视图层就是进行自动......