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 ...
随机推荐
- 【Machine Learning】决策树之简介(1)
Content 1.decision tree representation 2.ID3:a top down learning algorithm 3.expressiveness of data ...
- openvpn(上)
VPN概述:(全称Virtual Private Network)虚拟专用网络,是依靠ISP和其他的NSP,在公网中建立专用的数据通信网络的技术,可以为企业之间或者个人与企业之间提供安全的数据传输隧道 ...
- c++ 读取文本问题
c++文本操作有以下三个方法 ifstream,ofstream,fstream 读取文本常用的方法如下 std::ifstream input; input.open(".log" ...
- windows下libevent的编译及使用
之前简单分析了libevent的源码,过了一段时间要用的时候发现完全忘记了..从头记录一下流程 1.编译 可以从github下载libevent的压缩包,解压后 修改以下三个文件,添加宏定义: 在以下 ...
- oracle中PLSQL存储过程中如何使用逗号分隔的集合(逗号分隔字符串转换为一个集合)
原文: https://blogs.oracle.com/aramamoo/entry/how_to_split_comma_separated_string_and_pass_to_in_claus ...
- 【HAOI2010】工厂选址题解
题目描述 某地区有m座煤矿,其中第i号矿每年产量为ai吨,现有火力发电厂一个,每年需用煤b吨,每年运行的固定费用(包括折旧费,不包括煤的运费)为h元,每吨原煤从第i号矿运到原有发电厂的运费为Ci0(i ...
- luogu P4275 萃香的请柬
嘟嘟嘟 打表不难发现,序列的长度以及序列中1的个数都是斐波那契数列.因为第 i 秒1的个数由 i - 1的1和 i - 2的0变换而来,那么f[i] = f[i - 1] + f[i - 2].序列的 ...
- luogu P1642 规划
嘟嘟嘟 看到最后让求一个比值,应该得往01规划上去想.令x = ∑v[i] / ∑c[i],则x * ∑c[i] = ∑v[i], ∑(v[i] - x * c[i]) = 0. 于是可以二分x(注意 ...
- git branch 相关操作总结 新建分支 删除分支 切换分支 查看分支
查看分支 (1) 查看本地分支 git branch 列出本地已经存在的分支,并且在当前分支的前面加*号标记,例如:localhost:website admin$ git branch* bran ...
- 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取
thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...