详解vue 自定义组件使用v-model 及探究其中原理


Posted in Javascript onOctober 11, 2019

1、首先我们来实现自定义组件中使用v-model

父组件中注册子组件

<template>
 <div id="app">
  <p>{{name}}</p>
  <MyInput v-model="name"/>
 </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
 name: 'app',
 data(){
  return {
   name: 132
  }
 },
 components: {
  MyInput
 },
}
</script>

子组件接收父组件传值

<template>
  <div>
    <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
  </div>
</template>
<script>
export default {
 name: "MyInput",
 props: {
  value: ""
 },
};
</script>

2.探究v-model

在input中的v-model功能是实现数据的双向绑定,即绑定name值及改变值。

工作等同于以下代码:

<input type="text" v-bind:value="name" v-on:input="event=>name=event.target.value" />

v-bind将name的值绑定到value

v-on绑定input事件,当事件触发时将事件目标值赋值给name

而在自定义标签中的v-model与在input中的功能一致,但绑定的事件有些许不同,如下:

<MyInput type="text" v-bind:value="value" v-on:input="value=>name=value" />

在子组件中使用$emit触发MyInput中的input事件,此时$emit并不能传input的event的事件,而是直接传目标值。

详解vue 自定义组件使用v-model 及探究其中原理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
微信小程序调用后台service教程详解
Nov 06 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
JsonProperty 的使用方法详解
Oct 11 #Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 #Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 #Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 #Javascript
vue控制多行文字展开收起的实现示例
Oct 11 #Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 #Javascript
js脚本中执行java后台代码方法解析
Oct 11 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
浅谈React碰到v-if
2018/11/04 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python之import机制详解
2014/07/03 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python并发和异步编程实例
2018/11/15 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
UML设计模式笔试题
2014/06/07 面试题
学校安全工作制度
2014/01/19 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
用Python实现屏幕截图详解
2022/01/22 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL