props的变量名字 必须是  value ,this.$emit('input',数据值) 的自定义事件必须是 input ;

v-model 是 vue 中进行数据双向绑定的指令,在内部实际上是通过语法糖来完成数据的双向绑定,v-model 绑定的形式有两种,一种是绑定在普通表单元素上,一种是绑定在自定义组件上,两者在实现上也略微不同;

当 v-model 绑定在普通表单元素 select、checkbox、radio 时,语法糖为 v-bind:value 和 v-on:change;

当 v-model 绑定在 input、textarea时,语法糖分几种情况:
  默认为 input 事件;
  带 lazy 修饰符时为 change 事件;
  带 type="range" 属性时为 __r;
  带 trim或 number 时新增 blur 事件;

当 v-model 绑定在自定义组件时,语法糖为 v-bind:value 和 v-on:input 或者自定义 model 选项;

v-model 语法糖-在父子组件传值 的简写形式的更多相关文章

  1. vue3 语法糖setup 兄弟组件传值

    使用 mitt // 全局引入 npm install mitt 或者 cnpm install mitt 在main文件中挂载 import { createApp } from 'vue' imp ...

  2. 十八、React react-router4.x中:实现路由模块化、以及嵌套路由父子组件传值

    一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start ...

  3. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  4. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  5. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  6. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  7. Angular 父子组件传值

    Angular 父子组件传值 @Input  @Output  @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...

  8. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  9. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  10. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

随机推荐

  1. Continue-AI编程助手本地部署llama3.1+deepseek-coder-v2

    领先的开源人工智能代码助手.您可以连接任何模型和任何上下文,以在 IDE 内构建自定义自动完成和聊天体验 推荐以下开源模型: 聊天:llama3.1-8B 推理代码:deepseek-coder-v2 ...

  2. 微服务架构SpringCloud的理解

    微服务架构是什么? 微服务是一种架构思想,实际上以分布式系统方式开发.架构是为了解耦.该架构解决的是分布式中的四个问题: 一.客户端如何访问众多服务: 应用划分为众多服务以后,客户端需要如何访问? 通 ...

  3. Java jdk版本对照表

    这里将JDK版本和major.minor的版本的对照关系进行整理,作为今后查阅的依据. 序号 jdk版本 major.minor version 1 1.1 45 2 1.2 46 3 1.3 47 ...

  4. AvaloniaChat:一个基于大语言模型用于翻译的简单应用

    简介 一个使用大型语言模型进行翻译的简单应用. A simple application using a large language model for translation. 使用指南 访问Gi ...

  5. Https通信的SSL证书工作流程原理(转)

    前言 浏览器与服务器之间的https加密通信会包括以下一些概念:非对称加密.对称加密.RSA.证书申请.根证书.https证书加密,就是在传输层tcp和应用层http之间加了一层ssl层来对传输内容进 ...

  6. python pyqt6 设定窗口置顶

    self.setWindowFlag(Qt.WindowType.WindowStaysOnTopHint)即可效果一般,页面会出现闪烁一次, # 置顶按钮 self.top_button = QPu ...

  7. ZXING 修复预览页面变形问题

    ZXING之前都用的好好的,结果在一个Android11的设备上翻了车 (基于全屏预览的情况下) 扫码页面预览效果变形, 在网上找了一些代码,修改后发现无效,不适用我这边的设备, 最后想着,预览结果变 ...

  8. ocelot 从15.x版本升级到16.x版本 UnableToFindDownstreamRouteError Message: Failed to mat ch Route configuration for upstream path

    项目里面用到 ocelot ,之前老的项目用的是 15.x 最近要一个新项目也要用到,直接安装了最新的16.x,结果死活都匹配不到上游路径. 刚开始以为是自己代码写得有问题,各种找问题,结果后来把oc ...

  9. 【笔记】node常用方法(持续更新)

    1.path.basename(path[, ext]) path <string> ext <string> 可选的文件扩展名. 返回: <string> pat ...

  10. 免费在线OCR识别工具TextIn Tools,开启智能学习新时代

    传统的学习方式,笔记必须手写摘抄:带字照片只能插入文档:PDF转换要花钱买会员-- 而在线OCR识别工具tools.textin.com,既好用又免费,它不仅仅具有文字和表格识别工具,还包含PDF转文 ...