详解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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
初探PHP5
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
零基础php编程好学吗
2019/10/11 PHP
Javascript模块模式分析
2008/05/16 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
微信小程序用canvas画图并分享
2020/03/09 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python with的用法
2014/08/22 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python实现简单的代理服务器
2015/07/25 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
如何利用find命令查找文件
2015/02/07 面试题
销售类求职信
2014/06/13 职场文书
干部考核工作总结2015
2015/07/24 职场文书
Python time库的时间时钟处理
2021/05/02 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js