Vue的指令v-model的原理

v-model的原理

原理:v-model本质上是一个语法糖。例如应用在输入框上,就是value属性和input事件的合写。

作用:提供数据的双向绑定

  1. 数据变,视图跟着变 :value
  2. 视图变,数据跟这变 @input

注意:$event用于在模板中获取事件的形参。

vue 复制代码
<template>
	<div id="app">
    	<input v-model="msg" type="text">
    <input :value="msg" @input="msg = $event.target.value" type="text" name="" id="">
  	</div>
</template>

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

  1. 表单类组件封装

    1. 父传子:数据应该是父组件props传递过来的,v-model拆解绑定数据
    2. 子传父:监听输入,子传父传值给父组件修改

    父组件(使用):

    vue 复制代码
    <BaseSelect :cityId="selectId" @事件名="selectId = $event"></BaseSelect>

    子组件(封装):

    vue 复制代码
    <select :value="cityId" @chang="handleChange">...</select>
    vue 复制代码
    props: {
    	cityId: String
    },
    vue 复制代码
    methods: {
    	handleChange (e) {
    		this.$emit('事件名', e.target.value)
    	}
    }
  2. 父组件v-model简化代码,实现子组件和父组件数据双向绑定。

    1. 子组件中:props通过value接收,事件触发input
    2. 父组件中:v-model给组件直接解绑数据(:value+@input

    父组件(使用):

    vue 复制代码
    <BaseSelect v-model="selectId"></BaseSelect>

    子组件(封装):

    vue 复制代码
    <select :value="cityId" @chang="handleChange">...</select>
    js 复制代码
    props: {
    	value: String
    },
    methods: {
        handleChange (e) {
            this.$emit('input', e.target.value)
        }
    }
相关推荐
IT_陈寒10 分钟前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢18 分钟前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
GDAL19 分钟前
Knockout-ES5 入门教程
javascript·knockout
正义的大古19 分钟前
OpenLayers数据源集成 -- 章节八:天地图集成详解
开发语言·javascript·ecmascript·openlayers
LDM>W<28 分钟前
Electron下载失败
前端·javascript·electron
EndingCoder31 分钟前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu1 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰1 小时前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx
machinecat1 小时前
node,小程序合成音频的方式
前端·node.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 4 - 核心概念:收集依赖、触发更新
前端·vue.js