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. 【Java】JDBC Part6 Apache-DBUtil & Spring-JdbcTemplate

    Apache-DBUtils 开源的JDBC工具类,对JDBC的简单封装 SQL操作交给了QueryRunner的实例 Maven依赖 <!-- https://mvnrepository.co ...

  2. 【Linux】快速文件交互 lrzsz

    首先需要安装依赖: yum install -y lrzsz 没有此依赖,Linux提示找不到命令: [root@localhost ~]# rz -bash: rz: 未找到命令 [root@loc ...

  3. 【Spring-Security】Re07 持久化的记住我

    Security记住我功能底层实现依赖于SpringJDBC组件,如果有持久层框架的话,就由持久层框架实现 演示案例的选型,MysqlJdbc + MybatisStarter <depende ...

  4. lanczos算法——求解线性方程组时的辅助算法

    lanczos算法 Lanczos算法是一种将对称矩阵通过正交相似变换变成对称三对角矩阵的算法,以20世纪匈牙利数学家Cornelius Lanczos命名. 注意:Lanczos算法只能对" ...

  5. linux工具grep的使用心得笔记

    grep作为linux管理中常用的三大工具之一(grep.awk.sed),其功能十分强大,因此难以对其进行全面的使用介绍,因此本文只作为个人学习的笔记之用. grep的用处: 在文本中匹配要查询的字 ...

  6. NOI2024 集合 题解

    给个链接:集合. 很神秘的题目.基本上看到之后就可以想到哈希. 首先想到一个比较神秘的暴力.就是对于每个询问,扫一遍所有 \(a\) 中的数出现的位置,把它弄成一个哈希值(具体怎么弄随意)存到 set ...

  7. Sy.ExpressionBuilder 动态查询新体验

    省流模式,看下对比 //常规查询 var query = users .WhereIf(m => m.UserName.Contains(input.UserName), !string.IsN ...

  8. 23. 基于Cortex-A9 uboot代码启动分析

    本篇文章是彭老师第一次在B站直播间,边直播边记录笔记,视频已经上传到B站. 现在完善整理成该篇文章,有想学习uboot启动的代码详细流程的老铁可以进入我B站空间配合视频一起学习. [视频地址] B站用 ...

  9. apr库编译及队列使用笔记

    操作系统 :CentOS 7.9_x64 apr库版本:apr-1.7.4 & apr-util-1.6.3 gcc 版本:4.8.5 队列功能在C++或Python等脚本语言里面,是很容易就 ...

  10. uni-app 解析支付宝form表单,h5 app唤起支付宝

    1.通过接口拿到form表单 code为后端返回的form表单数据: document则是使用 document.querySelector('body').innerHTML 生成的html页面: ...