vue 新属性学习
1, $listeners
父级元素
<base-input v-on:focus.native="onFocus"></base-input>
子级元素
<label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label>
这时,父级的 .native
监听器将静默失败。它不会产生任何报错,但是 onFocus
处理函数不会如你预期地被调用。
为了解决这个问题,Vue 提供了一个 $listeners
属性,它是一个对象,里面包含了作用在这个组件上的所有监听器
有了这个 $listeners
属性,你就可以配合 v-on="$listeners"
将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 <input>
的你希望它也可以 配 合 v-model
工作的组件来说,为这些监听器创建一个类似下述 inputListeners
的计算属性通常是非常有用的
<input
type="num"
placeholder="请输入验证码"
maxlength="6"
v-bind="$attrs"
v-bind:value="value"
v-on="inputListeners"
/>
inputListeners: function () {
let vm = this
return Object.assign({},
this.$listeners,
{
focus: function () {
if (event.target.value.length) {
vm.showClose = true
}
},
input: function (event) {
vm.$emit('input', event.target.value)
}
}
)
}
2,inheritAttrs 配合 $attr使用
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。
在Vue2.4.0,可以在组件定义中添加inheritAttrs:false,组件将不会把未被注册的props呈现为普通的HTML属性。但是在组件里我们可以通过其$attrs可以获取到没有使用的注册属性,如果需要,我们在这也可以往下继续传递。
vue 新属性学习的更多相关文章
- vue.js的计算机属性学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- vue添加新属性不更新原因
一: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后 ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- HTML5学习笔记(三)新属性、功能
HTML5 拖放 1.元素的 draggable 属性设置为 true 2.ondragstart 属性调用函数,函数中dataTransfer.setData() 方法设置被拖数据的数据类型和值 3 ...
- Vue 超快速学习
Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...
- Vue源码学习1——Vue构造函数
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...
- Vue 2.0 学习路线
「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...
- Vue 2.0学习(一)简介
简介 Vue是一套用于构建用户界面的渐进式框架.简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既 ...
- 【Vue源码学习】响应式原理探秘
最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...
随机推荐
- python 面向对象 【进阶】
多态 多态跟python没有太大关系,因为python本身原生支持多态. def func(arg): #多态 print (arg) func(1) func(‘pand ...
- Android之自定义View以及画一个时钟
https://www.2cto.com/kf/201509/443112.html 概述: 当Android自带的View满足不了开发者时,自定义View就发挥了很好的作用.建立一个自定义View, ...
- JS复制DOM元素文字内容
要实现的效果:将HTML页面中的某个DOM元素例如DIV下面的文本内容进行复制. 实现过程如下: <html> <head> <title>Copy text De ...
- mssql删除数据库、删除帐号错误解决方法
1. 删除数据库或者恢复数据库时,一定要先将数据库离线,在执行删除.恢复操作. SQL代码如下: /*使数据库离线*/ ALTER DATABASE [数据库名] SET OFFLINE WITH R ...
- request.getRequestDispatcher().forward(request.response)
request.getRequestDispatcher().forward(request.response)中的那两个参数是哪里来的? 2010-11-09 23:13 QQ357169111 | ...
- mysql获取表列信息、主键信息
/** * 获取物理表中已存在的列信息 * @param tbName 表名 * @return results 查询结果 */ fun getExistColumnInfo(tbName:Strin ...
- Mysql学习---基础操作学习2
基本数据类型 Mysql基本数据类型:二进制,数值[整数,小数].字符串[定长,变长]. 二进制数据.时间和枚举集合 bit[(M)] 二进制位(101001),m表示二进制位的长度(1-64),默认 ...
- July 19th 2017 Week 29th Wednesday
Rather than envy others, it is better to speed up their own pace. 与其羡慕他人,不如加快自己的脚步. The envy of othe ...
- [零基础学JAVA]Java SE基础部分-03. 运算符和表达式
转自:http://redking.blog.51cto.com/27212/116751 1.课程名称:运算符.表达式 讲解了JAVA中各种运算符的使用,包括与.或.非.大于.小于等. 2.知识点 ...
- angularJS报错$apply already in progress的原因和解决方法
如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中 ...