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. 【Scala】04 对象特性Part1

    1.声明式包管理: 一个Scala文件可以声明N个包 包的意义和Java的包管理是一样的 同样也需要import导入资源声明 package pkgA { import com.oracle.nio. ...

  2. PVE linux_VM 扩容分区

    页面 调整磁盘大小 手动分区 fdisk -l fdisk /dev/sda 对该磁盘进行分区, 输入n并回车,n是"new"新建分区 [root@localhost ~]# fd ...

  3. pve 安装配置问题集锦

    官网:https://www.proxmox.com/en/ 下载:https://www.proxmox.com/en/downloads 安装:https://pve.proxmox.com/wi ...

  4. docker容器下安装nccl失败,报错:Failed to init nccl communicator for group,init nccl communicator for group nccl_world_group

    相关内容参考: https://www.cnblogs.com/devilmaycry812839668/p/15022320.html =============================== ...

  5. PHP 红包功能代码

    前段时间被问这个问题,最近有空就写写啦,还是挺有趣的 首先做下抢红包方法分类: 对于发红包的人来说,一共有大致3类(其他的我暂时没想到,有想到可以联系我呀~) 一.拼手气红包个数不定(完全看运气) 二 ...

  6. .NET 8 + Blazor 多租户、模块化、DDD框架、开箱即用

    前言 基于 .NET 8 的开源项目,主要使用 WebAPI + Blazor 支持多租户和模块化设计,DDD构建.可以帮助我们轻松地搭建起一个功能完善的Web应用程序.除了帮助你快速构建应用程序之外 ...

  7. redis集群之哨兵模式

    redis集群之哨兵模式 1.集群部署 安装配置可参考一下地址: https://www.cnblogs.com/zhoujinyi/p/5569462.html 2.与springboot集成 这里 ...

  8. 到底什么是Cortex、ARMv8、arm架构、ARM指令集、soc?一文帮你梳理基础概念【科普】

    前言 有粉丝问我到底什么是ARM,搞不清楚Cortex.arm内核.arm架构.ARM指令集.soc这些概念都是什么关系,下面一口君给大家整理一下关于ARM相关的一些概念. 1.ARM既可以认为是一个 ...

  9. ubuntu 安装psycopg2包

    psycopg2 库是 python 用来操作 postgreSQL 数据库的第三方库. 执行:pip3 install psycopg2==2.8.4 有可能会报错: Collecting psyc ...

  10. uni-app和vue及微信小程序的异同

    uni-app和vue的区别1.目录不同 uni-app目录依赖原生小程序风格,比如分包的概念 vue中对不同的页面只需要在views文件夹中定义不同组件,然后配置路由跳转就行了,所有页面都是这样, ...