关于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 相关文章推荐
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
Node.js的特点详解
Feb 03 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
js实现tab栏切换效果
Aug 02 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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
一个简单的PHP入门源程序
2006/10/09 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
JS截取字符串常用方法详细整理
2013/10/28 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
JS常见算法详解
2017/02/28 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
JS如何监听div的resize事件详解
2020/12/03 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
django-csrf使用和禁用方式
2020/03/13 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
违纪检讨书2000字
2014/02/08 职场文书
医院工作检讨书范文
2014/02/10 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
导游个人求职信范文
2014/03/23 职场文书
物流管理专业推荐信
2014/09/06 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
员工自我评价范文
2015/03/11 职场文书
入党培养人考察意见
2015/06/08 职场文书
在职证明书模板
2015/06/15 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
k8s部署redis cluster集群的实现
2021/06/24 Redis
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
MySQL分布式恢复进阶
2022/07/23 MySQL