详解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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
layui 实现表格某一列显示图标
2019/09/19 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
《识字五》教学反思
2014/03/01 职场文书
文明寝室标语
2014/06/13 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
党员评议个人总结
2014/10/20 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
法定代表人免职证明
2015/06/24 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers