详解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 相关文章推荐
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
js实现图片360度旋转
2017/01/22 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
详解vue中axios的使用与封装
2019/03/20 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
python实现字符串和日期相互转换的方法
2015/05/13 Python
使用Python对MySQL数据操作
2017/04/06 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
详解Python if-elif-else知识点
2018/06/11 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
单位在职证明范本
2014/01/09 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
音乐教师求职信
2014/06/28 职场文书
五心教育心得体会
2014/09/04 职场文书
员工离职感谢信
2015/01/22 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
python实现进度条的多种实现
2021/04/29 Python
canvas 中如何实现物体的框选
2022/08/05 Javascript