关于vue组件事件属性穿透详解
组件事件属性穿透
属性
$attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好
// 子组件 <template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> </div> </template> props: { test: { type: String, default: '123456' } }, created () { console.log(`props:%o`, this.$props) // {test: '测试'} console.log('attrs:%o', this.$attrs) // {value: '测试'} }, // 父组件 <myInput :value="value" :class="class_" :style='style' :test='test' @input1="input"/> data () { return { style: { color: 'red' }, value: '测试', class_: 'test', test: '测试' } }
注意:
由于在这个组件中input并不是根元素,默认情况下父组件的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上,在该例子中根节点div会有value="测试"的属性,所以子组件需要设置 inheritAttrs: false去掉根元素默认行为,这样就可以通过实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。
在子组件修改props,却不会修改父组件,这是因为extractPropsFromVNodeData中是通过浅复制将父组件中数据传递给props的。 浅复制意味着在子组件中对对象和数组的props进行修改还是会影响父组件,这就违背了单向数据流的设计。因此需要避免这种情况出现。
事件
$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件 computed: { listeners () { return { ...this.$listeners, // 下面写需要从子组件事件传值到从父组件中的 input: e => { this.$emit('input1', e.target.value) } } } },
以上这篇关于vue组件事件属性穿透详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
对vue中的事件穿透与禁止穿透实例详解
在开发过程中经常遇到的一个场景,就是,页面弹窗,弹窗上有一个确定或者关闭按钮,这时,如果下方有一个按钮,那你点击弹窗的时候,也会触发弹窗下层的按钮事件,vue提供的解决方法就是直接在click.stop //阻止单击事件继续传播 <a v-on:click.stop="doThis"></a> js的解决办法是,直接在事件的方法中添加event.stopPropagation() //html <button>关闭</button> //
-
详解Vue中的scoped及穿透方法
scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这
-
vue解决弹出蒙层滑动穿透问题的方法
最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码上
-
详解Vue中CSS样式穿透问题
1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有
-
Vue中的scoped实现原理及穿透方法
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp
-
vue 弹框产生的滚动穿透问题的解决
最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码,开始这次的vue尝试吧. 首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + classN
-
关于vue组件事件属性穿透详解
组件事件属性穿透 属性 $attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好 // 子组件 <template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> &l
-
Vue组件选项props实例详解
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据
-
vue 组件高级用法实例详解
一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-component19 :count="1"></my-component19> </div> Vue.component('my-component19',{ name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件
-
Vue组件的使用教程详解
官网: https://cn.vuejs.org/v2/guide/components.html 1.Vue组件的介绍 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 2.使用组件 对于自定义标签的命名 Vue.js 不强制
-
vue组件父子间通信详解(三)
本文实例为大家分享了vue组件父子间通信的具体代码,供大家参考,具体内容如下 三.组件间通信($parent $refs) 父组件要想获取子组件的数据: ①在调用子组件的时候,指定ref属性 <child-component ref="mySon"></child-component> ②根据指定的引用的名字 找到子组件的实例对象 this.$refs.mySon 子组件要想获取父组件的数据: ①直接读取 this.$parent 通过this.$refs拿到子
-
vue组件tabbar使用方法详解
本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下 1.App.vue <!-- 入口文件 --> <template> <div id="app"> <!-- 视图层 --> <router-view></router-view> <!-- 底部选项卡 --> <tabbar @on-index-change="onIndexChange" v
-
vue组件系列之TagsInput详解
简介 TagsInput 是一种可编辑的输入框,通过回车或者分号来分割每个标签,用回退键删除上一个标签.用 vue 来实现还是比较简单的. 先看效果图,下面会一步一步实现他. 注:以下代码需要vue-cli环境才能执行 (一)伪造一个输入框 因为单行的文本框只能展示纯文本,所以图里面的标签实际上都是 html元素,用vue模板来写的话,是这样的: <template> <div class="muli-tags" @click='focus'> <butt
-
vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为
目录 1.监听事件 2.事件处理方法 3.带参数的时间绑定方法: 4.内联处理器中的方法 5.事件对象 6.事件冒泡 7.阻止默认行为: 8.其他事件修饰符 补充:原生JS阻止冒泡 其实v-on后面跟的不止是click事件也可以是其他的事件,用法均相似.比如:v-on:click/mouseout/mouseover/mousedown....... 以下click为例 注意:所有的v-on都可以简写为@,比如说v-click可以简写为@click 1.监听事件 可以用v-on指令监听 DOM
-
Vue组件之间的数据共享详解
目录 一.在项目开发中,组件之间的最常见的关系分为如下两种: 1.1 父子组件之间的数据共享 1. 父 -> 子共享数据 2.子 -> 父共享数据 1.2 兄弟组件之间的数据共享 总结 一.在项目开发中,组件之间的最常见的关系分为如下两种: 1.父子关系 2.兄弟关系 1.1 父子组件之间的数据共享 父子组件之间的数据共享又分为: 1. 父 -> 子共享数据 子组件: 父组件: 2.子 -> 父共享数据 子组件向父组件共享数据使用自定义事件.示例代码如下 子组件: 父组件: 页面显
-
Vue 使用Props属性实现父子组件的动态传值详解
如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo
随机推荐
- 详解基于webpack搭建react运行环境
- 数据库日常维护常用的脚本概述及部分测试
- java中unicode和中文相互转换的简单实现
- python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
- WebApi实现通讯加密
- C#字符串数组转换为整形数组的方法
- 用PHP将网址字符串转换成超链接(网址或email)
- C++中virtual继承的深入理解
- Vue自定义指令详解
- Shell中实现“多线程”执行脚本文件完美解决方案
- linux安装apache过程中注意的问题
- MySQL所支持的数据类型与表字段约束类型的学习教程
- 全面解析jQuery $(document).ready()和JavaScript onload事件
- 老生常谈Log4j和Log4j2的区别(推荐)
- 详解IOS四种保存数据的方式
- PHP新手上路(十一)
- Android仿QQ附近的人搜索展示功能
- 固定表格的高度超过指定高度就隐藏的方法
- Cisco路由器配置信息及口令的清除
- POI导出Excel报错No such file or directory的解决方法