微客导航 » 文章资讯 » 关于vue组件事件属性穿透详解

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

2023-08-10 08:01:04 158

组件事件属性穿透

属性

$attrs包含从父组件传过来的属性，但不包含子组件中prop中的属性以及class和style，所以对于那些html元素原生属性，可以不用再子组件中声明，直接从父组件中传进来就好

//子组件

props:{
test:{
type:String,
default:'123456'
}
},
created(){
console.log(`props:%o`,this.$props)//{test:'测试'}
console.log('attrs:%o',this.$attrs)//{value:'测试'}
},

//父组件

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐