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

更新时间：2019年10月28日 09:21:34 作者：莫西摩西

今天小编就为大家分享一篇关于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组件事件属性穿透详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vuejs 页面的区域化与组件封装的实现
本篇文章主要介绍了Vuejs 页面的区域化与组件封装的实现。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
electron实现打印功能支持静默打印、无感打印
使用electron开发应用遇到了打印小票的功能,实现途中还是几经波折,下面这篇文章主要给大家介绍了关于electron实现打印功能支持静默打印、无感打印的相关资料,需要的朋友可以参考下
2023-12-12
vue3组合式API中setup()概念和reactive()函数的用法
这篇文章主要介绍了vue3组合式API中setup()概念和reactive()函数的用法,接下来的事件，我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式，需要的朋友可以参考下
2023-03-03
Swiper在Vue2中的简单使用方法
这篇文章主要给大家介绍了关于Swiper在Vue2中的简单使用方法,swiper是一款现代化的移动端轮播组件,可以在Vue中轻松使用,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-11-11
Vue正则表达式限制input的输入范围
我们有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码,感兴趣的朋友跟随小编一起看看吧
2023-12-12
详解Vue打包优化之code spliting
这篇文章主要介绍了详解Vue打包优化之code spliting，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue.js中created方法作用
这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍，需要的朋友可以参考下
2018-03-03
vue+element-ui前端使用print-js实现打印功能(可自定义样式)
Print.js主要是为了帮助我们直接在浏览器中开发打印功能,下面这篇文章主要给大家介绍了关于vue+element-ui前端使用print-js实现打印功能(可自定义样式)的相关资料,需要的朋友可以参考下
2022-11-11
简单了解Vue + ElementUI后台管理模板
这篇文章主要介绍了简单了解Vue + ElementUI后台管理模板,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
vue3开启摄像头并进行拍照的实现示例
本文主要介绍了vue3开启摄像头并进行拍照的实现示例,主要是使用navigator.mediaDevices.getUserMedia这个API来实现,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01