关于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组件事件属性穿透详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目在线上服务器访问失败原因分析，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了vue中音频wavesurfer.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
Vue3+echarts5踩坑以及resize方法报错的解决
这篇文章主要介绍了Vue3+echarts5踩坑以及resize方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
如何解决this.$refs.form.validate()不执行的问题
这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要为大家详细介绍了vue+element表格导出为Excel文件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了关于vant折叠面板默认展开问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue0.1的过滤代码如何添加到Vue2.0直接使用，这篇文章主要介绍了过滤代码添加到Vue2.0用的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
vxe-table是一个全功能的Vue表格,满足绝大部分对Table的一切需求,与任意组件库完美兼容,下面这篇文章主要给大家介绍了关于Vxe-Table开发中各种坑以及避坑的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了关于antd-vue a-menu菜单绑定路由的相关问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论