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使用

  

vue官方对vm.$attrs的介绍:
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。
 

在Vue2.4.0,可以在组件定义中添加inheritAttrs:false,组件将不会把未被注册的props呈现为普通的HTML属性。但是在组件里我们可以通过其$attrs可以获取到没有使用的注册属性,如果需要,我们在这也可以往下继续传递。

vue 新属性学习的更多相关文章

  1. vue.js的计算机属性学习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. vue添加新属性不更新原因

    一: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后 ...

  3. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  4. HTML5学习笔记(三)新属性、功能

    HTML5 拖放 1.元素的 draggable 属性设置为 true 2.ondragstart 属性调用函数,函数中dataTransfer.setData() 方法设置被拖数据的数据类型和值 3 ...

  5. Vue 超快速学习

    Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...

  6. Vue源码学习1——Vue构造函数

    Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只 ...

  7. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

  8. Vue 2.0学习(一)简介

    简介 Vue是一套用于构建用户界面的渐进式框架.简单小巧( 压缩后仅17KB),Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手,还便于与第三方库或既 ...

  9. 【Vue源码学习】响应式原理探秘

    最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,V ...

随机推荐

  1. 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 ...

  2. android webview 播放 video经验总结

    在目前PC浏览器上,对video的支持基本都没什么问题了.但是如果用webview去跑这样的页面就会遇到许多问题. 下面一段html <!DOCTYPE html> <html> ...

  3. sqlserver中循环生成记录

    declare @i int set @i=1 while(@i<=10) begin INSERT INTO [BMData].[dbo].[QueryBlackListLogs] ([ID] ...

  4. C++ virtual inheritance ZZ

       虚继承 是面向对象编程中的一种技术,是指一个指定的基类,在继承体系结构中,将其成员数据实例共享给也从这个基类型直接或间接派生的其它类. 举例来说:假如类A和类B各自从类X派生(非虚继承且假设类X ...

  5. ubuntu 启用root用户方法

    1.按下ctrl + alt + T,输入 sudo passwd root设置root的密码,如下图所示: 2.使用su root来测试是否可以进入root用户,如果出现#说明已经设置root用户的 ...

  6. Laravel Query Builder 复杂查询案例:子查询实现分区查询 partition by

    案例 案例:Laravel 在文章列表中附带上前10条评论?,在获取文章列表时同时把每个文章的前10条评论一同查询出来. 这是典型分区查询案例,需要根据 comments 表中的 post_id 字段 ...

  7. Windows 如何查看本地端口被进程占用的情况?

    1.查看端口占用情况: 1.开始--运行--cmd 进入命令提示符. 2. 输入netstat -ano(或netstat -nao) ,即可看到所有进程(这里显示进程的PID)占用端口的情况. 3. ...

  8. [零基础学JAVA]Java SE基础部分-04. 分支、循环语句

    转自:http://redking.blog.51cto.com/27212/116751 1.课程名称:分支.循环 本季为JAVA程序中最重要的部分,在讲解的时候除了讲解各种主要的控制语句(分支语句 ...

  9. HDU 1281 棋盘游戏 【二分图最大匹配】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1281 题意概括: 有N*M大的棋盘,要在里面放尽量多的“车”,求最多能放的车的个数,和为了放最多的车有多 ...

  10. php函数:call_user_func

    前段时间浏览文档发现一个有意思的PHP函数:call_user_func [文档地址] 函数作用:该函数主要用于通过函数名去调用该函数 例如: function test(){ echo " ...