vue在render函数中如何实现v-model和事件绑定(4)
1.h函数的三个参数
第一个参数是必须的。
类型:{String | Object | Function}
一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
是要渲染的html标签。
第一个参数div 是表示创建一个div的元素
第二个参数是可选的。
类型:{Object} 主要是当前html中的各种属性。
如attrs,class,style等
在开发时。建议传,实在没有传的时候,传入 null
第三个参数可选的。
类型:{String | Array | Object} children
虚拟子节点(vnodes),当前html标签的元素。
export default{
data(){
return{
}
},
render(h){
let that=this;//为了防止this的指向发生改变
console.log("render中的this", this);//Proxy {}对象
return h('input',{
// wa你想咋个命名就怎样
wa:{
value: that.value,//获取值
},
// 事件on,用来监听input事件
on:{
'input':function(event){
that.$emit('input',event.target.value)
}
}
}
);
}
}
在使用的页面中
import aa from "./myrender"
<aa v-model="name"></aa>
{{name}}
data(){
return{
name:"",
}
}
components:{
aa
}

vue在render函数中如何实现v-model和事件绑定(4)的更多相关文章
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- 终于搞懂了vue 的 render 函数(一) -_-|||
终于搞懂了vue 的 render 函数(一) -_-|||:https://blog.csdn.net/sansan_7957/article/details/83014838 render: h ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- MVVM设计模式和在WPF中的实现(四) 事件绑定
系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...
- vue之Render函数
(1)什么是Render函数 先来看一个场景,在博客网中,一般有一级标题.二级标题.三级标题...,为了方便分享url,它们都做成了锚点,点击后,会将内容加载网址后面,以#分隔. 例如‘特性’是一个& ...
- vue监听页面中的某个div的滚动事件,并判断滚动的位置
在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...
- js 函数定义的两种方式以及事件绑定(扫盲)
一.事件(例如:onclick)绑定的函数定义放在jsp前面和放后面没影响 二. $(function() { function func(){}; }) onclick通过如下方式绑定事件到jsp中 ...
- angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)
angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...
- WPF中使用System.Windows.Interactivity实现事件绑定的替代方法
一.问题描述 对于 Button 等控件,在 MVVM 中我们能通过 Command 绑定解决 Click 事件.具体如下所示: <Button Margin="10" He ...
随机推荐
- 当你运行npm run命令时,会发生什么?
摘要:今天我们来聊一聊运行npm run命令之后会发生什么. 本文分享自华为云社区<运行npm run命令的时候会发生什么?>,作者:gentle_zhou . 先前发了一篇"运 ...
- linux添加用户,修改用户密码,修改用户权限,设置root用户操作
1.添加普通用户 [root@server ~]# useradd chenjiafa //添加一个名为chenjiafa的用户[root@server ~]# passwd chenjiafa ...
- xcode打包导出ipa
xcode打包导出ipa 众所周知,在开发苹果应用时需要使用签名(证书)才能进行打包安装苹果IPA,作为刚接触ios开发的同学,只是学习ios app开发内测,并没有上架appstore需求,对于苹果 ...
- 如何精准预测天气?火山引擎ByteHouse与大地量子这么做
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 伴随着气象技术的发展以及城市气象设施的完善,气象监测服务能力在不断提高,实现短期甚至中长期的气象预测成为可能. ...
- Kubernetes(K8S) Controller - Deployment 介绍
什么是controller 实际存在的,管理和运行容器的对象 Pod 和 Controller 关系 Pod 是通过 Controller 实现应用的运维,比如伸缩.滚动升级等等 Pod 和 Cont ...
- 注册中心/配置管理 —— SpringCloud Consul
Consul 概述 Consul 是一个可以提供服务发现,健康检查,多数据中心,key/Value 存储的分布式服务框架,用于实现分布式系统的发现与配置.Cousul 使用 Go 语言实现,因此天然具 ...
- Leaflet 使用图片作为地图
Leaflet 使用图片作为地图 关键代码: L.CRS.Simple.transformation = new L.Transformation(1, 0, 1, 0); // 坐标原点切换为左上角 ...
- vue学习笔记 八、toRef的使用
系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...
- vue双向定位导航效果
需求:实现双向定位导航效果,点击左侧菜单,右侧滚动到相应的位置.滚动右边,左侧相应菜单高亮. html代码: 1 <ul class="EntTake_main_left" ...
- 解决xshell-ssh远程登录,只能通过public key登录导致无法登录的情况
xshell无法通过密码登录的问题如下: 1.登录主机:vi /etc/ssh/sshd_config 2.搜索关键字:PasswordAuthentication 3.将PasswordAuthen ...