v-model的js原生写法和底层原理

数据绑定

v-model原理

  • 原理:

    html 复制代码
    <template>
      <div id="app">
        <input v-model="msg" type="text">   //在vue中提供数据的双向绑定
        //这里两个输入框作用都是一样的
        //v-bind 的作用是使得 HTML 元素的某个属性能够动态地根据 Vue 实例中的数据进行更新,监听input输入值
        <input :value="msg" @input="msg = $event.target.value" type="text">
      </div>
    </template>

    两者区别

    • v-model: vue实例中数据更新视图更新,视图更新数据就更新
    • :value: 如果只写:value="msg" 这一步,数据变化视图也变化,但视图变化数据就不会更新到data中,此时就对输入框进行事件监听@input,将获取的值赋值给msg, $event事件的形参

表单类组件封装 & v-model 简化

表单类组件封装

​ 在组件拆分当中,当把多个表单进行封装模块化时,把数据放在父组件中,实现表单提交数据,子组件通过父传子拿到数据后,如果直接用v-model数据绑定,是不能直接和props传递的数据进行绑定的,子组件修改修改数据时就不方便,不能使用v-model是因为数据是父组件提供的:value的思路就方便很多

父组件

html 复制代码
  <BaseSelect :cityId="select" @事件名="selectId = $event"></BaseSelect>   //父组件传递数据,监听子组件事件

子组件

html 复制代码
  <select :value="cityId" @change="handelChange"> </select>
javascript 复制代码
  props: {
    cityId: String
  }
javascript 复制代码
  methods: {
    handleChange (e) {
      this.$emit('事件名',e.target.value)
    }
  }

代码逻辑:子组件接收到cityId数据时 ,用:value数据绑定,然后对下拉框事件@change进行监听,方法 handleChange发送修改请求给父组件,父组件监听事件名

父组件v-model简化代码

​ 父组件可以用 v-model,实现父组件和子组件的双向数据绑定,子组件中props通过value接收事件触发 input

父组件中vimodel给组件直接绑定数据

html 复制代码
<BaseSlect :value="selectId" @input="selectId = $event"></BaseSlect> //v-model的原理
//直接写v-model的前提是,子组件中配置好:value  和  @input
<BaseSlect v-model="selectId"></BaseSlect>
html 复制代码
<select :value="value" @change="handleChange">
  
</select>
javascript 复制代码
props: {
  value: String
}
javascript 复制代码
methods: {
  handleChange(e) {
    this.$emit('input',e.target.value)
  }
}

代码逻辑:子组件接收数据的属性名直接改为value,都组件穿过来的数据就是value,向父组件发送修改的事件名为input,子组件代码修改没有太多

.sync修饰符

  • 作用:可以实现子组件和父组件数据的双向绑定
  • props属性名可以自定义,非固定为value,提高可读性
  • 场景:封装弹框类的基础组件, visible属性 true显示,false隐藏
相关推荐
SuperEugene5 小时前
Vue3 组件复用设计:Props / 插槽 / 组合式函数,三种复用方式选型|组件化设计基础篇
前端·javascript·vue.js
nFBD29OFC5 小时前
利用Vue元素指令自动合并tailwind类名
前端·javascript·vue.js
i220818 Faiz Ul7 小时前
动漫商城|基于springboot + vue动漫商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·动漫商城系统
摸鱼仙人~9 小时前
增量快照 vs 结构化共享:适用场景全解析
前端·vue.js
A923A10 小时前
【小兔鲜电商前台 | 项目笔记】第八天
前端·vue.js·笔记·项目·小兔鲜
清风絮柳12 小时前
65.少儿英语微信小程序
vue.js·spring boot·微信小程序·小程序·毕业设计
摸鱼仙人~16 小时前
Vue中markdown-it基础使用教程
前端·javascript·vue.js
落魄江湖行16 小时前
入门篇二:Nuxt 4路由自动生成:告别手动配置路由的日子
前端·vue.js·typescript·nuxt4
xiaotao13117 小时前
第八章:实战项目案例
前端·vue.js·vite·前端打包
源码站~19 小时前
基于Spring Boot+Vue3的烹饪交流学习系统 设计与实现
java·vue.js·spring boot·后端·mysql·毕业设计·毕设