在vue中使用inheritAttrs实现组件的扩展性介绍
1、首先我们创建一个input组件
<template>
<div class="inputCom-wrap">
<input v-bind="$attrs" />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs:false,//不希望根直接继承特性，而是使用$attrs自定义继承，当前组件的根就是inputCom-wrap
setup () {
return {}
}
})
</script>
<style scoped>
</style>
2、使用组件的时候，随便增加一些属性，如
<inputCom type="text" class="input-a"></inputCom>
<inputCom type="password" class="input-b"></inputCom>
3、查看最终的渲染结果为(与props不会冲突)
补充知识：vue组件深层传值inheritAttrs、$attrs、$listeners
1、$attrs
组件深层传值 可通过父组件绑定 v-bind="$attrs"传给子组件
一般子组件this.$attrs可以拿到父组件的所有传输的属性。
当子组件props注册了声明某属性之后，this.$attrs将不包含该属性；
同理通过v-bind="$attrs"绑定孙子组件也不会包含子组件props声明的属性。
props: {
data:{
type: Array,
default: () => [],//数组格式[{label:xx,value:xxx}]
},
value: {
type: Array,
default: () => [],//数组格式[xx,xx,xx]
},
maxHeight:{
type:[String,Number],
default:350,
}
},
mounted() {
console.log("来自多选",this.$attrs)
},
2、inheritAttrs
默认值为true
默认情况子组件props未声明，父组件传输的其他属性会被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上（有可能会覆盖子组件根元素上的某些属性列如 type="text"之类属性）
子组件的inheritAttrs 设置为false可以避免
3、$listeners
父组件-子组件-孙子组件，现在我要你在孙子组件里改变父组件的值，子组件直接绑定
<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>
以上这篇在vue中使用inheritAttrs实现组件的扩展性介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Element-UI+Vue模式使用总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了Vue-less的使用和deep深度选择器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了加快Vue项目的开发速度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue-element如何实现动态换肤存储问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue+Element自定义纵向表格表头教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码，有兴趣的朋友参考学习下。2018-06-06
这篇文章主要介绍了Vue3如何获取来源路由问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
今天小编就为大家分享一篇vue select选择框数据变化监听方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论