话不多说,直接上代码


<div id="app">
<price-input v-bind:value="price" v-on:input="price = arguments[0]" ></price-input>
<price-input v-model='price' ></price-input>
<p>{{price}}</p>
</div>
 

 <script type="text/javascript ">
Vue.component('price-input', {
template: '<input :value="value " @input="updateVal" type="text ">',
props: ["value "],
methods: {
updateVal: function() {
let val = event.target.value
this.$emit('input',val);
}
}
});
var app = new Vue({
el: '#app',
data: {
price: ''
},
});
</script>

大致流程为子组件的输入值改变,触发oninput方法,进而通过emit触发实例上的input方法,进而给父组件中的状态赋值。

demo示例

vue父子组件实现v-model的更多相关文章

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

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

  2. vue父子组件状态同步的最佳方式续章(v-model篇)

    大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...

  3. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  4. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  5. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  6. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  7. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  8. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  9. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

  10. vue父子组件

    vue父子组件 新建 模板 小书匠  为什么要厘清哪个是父组件,哪个是子组件? 一开始浏览器接收和要显示的数据非常少,此时无需划分区域进行布局.随着页面数据量的增加,如果单纯一个窗口来加载和显示数据, ...

随机推荐

  1. Hadoop 2.8集群安装及配置记录

    第一部分:环境配置(含操作系统.防火墙.SSH.JAVA安装等) Hadoop 2.8集群安装模拟环境为: 主机:Hostname:Hadoop-host,IP:10.10.11.225 节点1:Ho ...

  2. New Journey Prepare

    1. 车载USB充电器. 2. 轮胎检测,备胎充气. 3. 给刹车片加润滑油. 3. 给娃办身份证. 4. 取公积金. 5. 入职准备材料.

  3. C语言的“编译、链接”

    我们写的代码,仅仅是文本文件(txt),不管后缀怎么变,终究是文本文件,计算机只能显示,不能做事(执行). 文本文件通过“编译.链接”,成为可执行文件(windows下是exe): 编译:生成.o文件 ...

  4. 数据传输流程和socket简单操作

    一.***C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等硬件cs架构 ...

  5. DLC 数制与数制的转换

    进位计数值:用进位的方法进行计数 常用数值有十进制.二进制.八进制.十六进制等. 进位计数制把包括基数与权两个基本问题.

  6. scrapy-shell, settings

    进入scrapy shell交互终端 scrapy shell  url settings配置文件 NUMBER = 1 可以通过 spider对象调用 class SunshineSpider(sc ...

  7. IIS 字符串过长

    jquery.datatable.js---弹窗要用极速模式 <?xml version="1.0" encoding="utf-8"?><c ...

  8. docker swarm 部署服务时,限制服务启动后所在的机器

    借助容器技术,可以方便的在不同环境下部署服务,保证服务环境的一致性.docker swarm这个东西,可以方便的对容器进行编排管理. docker swarm集群中,有manager节点与worker ...

  9. C++builder Tokyo 调用com 不正确的变量类型

    C++builder Tokyo 调用com 不正确的变量类型 tt.OleFunction("interface_call","MS01",&erro ...

  10. github PageHelper使用PageInfo数据错乱问题

    如果出现了数据错乱,检查一下代码是否正确 PageHelper.start(1,10); List<MyEntity> lists = mapper.query(); PageInfo&l ...