关于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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 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
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
jquery tools之tooltip
2009/07/25 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
详解python读取和输出到txt
2019/03/29 Python
django云端留言板实例详解
2019/07/22 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
python如何停止递归
2020/09/09 Python
四年的个人工作自我评价
2013/12/10 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
家长通知书家长评语
2014/04/17 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
戒赌保证书
2015/05/11 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
Java中的Kotlin 内部类原理
2022/06/16 Java/Android