关于vue组件事件属性穿透详解


Posted in Javascript onOctober 28, 2019

组件事件属性穿透

属性

$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组件事件属性穿透详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
angularJS 入门基础
Feb 09 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
微信小程序实现底部弹出模态框
Nov 18 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 #Javascript
vue h5移动端禁止缩放代码
Oct 28 #Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 #Javascript
element-ui 本地化使用教程详解
Oct 28 #Javascript
vue 全局环境切换问题
Oct 27 #Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 #Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 #Javascript
You might like
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php标签云的实现代码
2012/10/10 PHP
php实现telnet功能示例
2014/04/08 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
javascript清空table表格的方法
2015/05/14 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python实现移动木板小游戏
2020/10/09 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
领导视察欢迎词
2014/01/15 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
小学校长个人总结
2015/03/03 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书