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. 【Vue2】Direct 指令

    1.内容渲染指令 1.插值表达式 2.V - TEXT 3.V - HTML <!DOCTYPE html> <html lang="en"> <he ...

  2. 阿里的镜像站不稳定如何解决——通过清华镜像站安装阿里的python包

    最近在看阿里的python包,原因是为了看下阿里的modelscope服务,不过一个十分搞笑的一个事情,那就是阿里的python包在阿里网站上是访问不了的,只能换到其他镜像站来下载. 使用阿里的pyp ...

  3. 为什么我要弃用华为的软件产品——mindspore从入门到放弃之感想

    从本博主前段时间的博文就可以看到博主写了好多关于华为软件mindspore的入门资料和编译方法以及一些bug的修复,但是无奈之下发现这些简单而且显而易见的bug不仅长期存在与软件中而且在提交PR后而一 ...

  4. vscode 单步调试时设置——是否进入非本项目的代码

    如题,在vscode中默认设置在调试时不能进入非本项目的代码(类.函数.模块),这个设置基本是OK的,因为确实没有必要进入到非本项目的代码中,但是如果有特殊需要想改变设置使其能够进入到本项目外的代码时 ...

  5. element-UI tree树形控件 修改小三角图标

    .el-tree /deep/ .el-tree-node__expand-icon.expanded{ -webkit-transform: rotate(0deg); transform: rot ...

  6. 从头搭建一个嵌入式web服务器-boa服务器

    一.什么是boa? BOA是一款非常小巧的Web服务器,源代码开放.性能优秀.支持CGI通用网关接口技术,特别适合应用在嵌入式系统中. BOA服务器主要功能是在互联嵌入式设备之间进行信息交互,达到通过 ...

  7. kafka 运维

    查看kafka topic列表 #集群需要先执行unset JMX_PORT ./kafka-topics.sh --zookeeper gitee-zookeeper:2181 --list 查看t ...

  8. esphome esp8266刷写遇到的问题

    问题描述: 在尝试打开串口时出现以下错误信息: Failed to execute 'open' on 'SerialPort': Failed to open serial port. 起因: 莫名 ...

  9. Element-UI 中使用rules验证 金额 数字

    data中定义验证规则:var checkCount = function (rule, val, callback) { if (!val) { return callback(new Error( ...

  10. [python][selenium] Web UI自动化8种页面元素定位方式

    关联文章:Web UI自动化页面切换iframe框架 简单的加个前置知识: 第一:webdriver.Chrome()这句话,通过WebDriver的构造方法,拿到浏览器驱动的对象,然后通过这个对象, ...