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 ...
随机推荐
- mysql 更新sql报错:You can't specify target table 'wms_cabinet_form' for update in FROM clause
数据库里面有两个字段的位置不对,要把他们对调换下.因为没有数据库写的权限,需要用sql语句来实现.原来以为简单的 update table a set a.字段a=(select b字段 from t ...
- android webview 播放 video经验总结
在目前PC浏览器上,对video的支持基本都没什么问题了.但是如果用webview去跑这样的页面就会遇到许多问题. 下面一段html <!DOCTYPE html> <html> ...
- sqlserver中循环生成记录
declare @i int set @i=1 while(@i<=10) begin INSERT INTO [BMData].[dbo].[QueryBlackListLogs] ([ID] ...
- C++ virtual inheritance ZZ
虚继承 是面向对象编程中的一种技术,是指一个指定的基类,在继承体系结构中,将其成员数据实例共享给也从这个基类型直接或间接派生的其它类. 举例来说:假如类A和类B各自从类X派生(非虚继承且假设类X ...
- ubuntu 启用root用户方法
1.按下ctrl + alt + T,输入 sudo passwd root设置root的密码,如下图所示: 2.使用su root来测试是否可以进入root用户,如果出现#说明已经设置root用户的 ...
- Laravel Query Builder 复杂查询案例:子查询实现分区查询 partition by
案例 案例:Laravel 在文章列表中附带上前10条评论?,在获取文章列表时同时把每个文章的前10条评论一同查询出来. 这是典型分区查询案例,需要根据 comments 表中的 post_id 字段 ...
- Windows 如何查看本地端口被进程占用的情况?
1.查看端口占用情况: 1.开始--运行--cmd 进入命令提示符. 2. 输入netstat -ano(或netstat -nao) ,即可看到所有进程(这里显示进程的PID)占用端口的情况. 3. ...
- [零基础学JAVA]Java SE基础部分-04. 分支、循环语句
转自:http://redking.blog.51cto.com/27212/116751 1.课程名称:分支.循环 本季为JAVA程序中最重要的部分,在讲解的时候除了讲解各种主要的控制语句(分支语句 ...
- HDU 1281 棋盘游戏 【二分图最大匹配】
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1281 题意概括: 有N*M大的棋盘,要在里面放尽量多的“车”,求最多能放的车的个数,和为了放最多的车有多 ...
- php函数:call_user_func
前段时间浏览文档发现一个有意思的PHP函数:call_user_func [文档地址] 函数作用:该函数主要用于通过函数名去调用该函数 例如: function test(){ echo " ...