在vue中使用inheritAttrs实现组件的扩展性介绍

更新时间：2020年12月07日 10:04:54 作者：gwenbi

这篇文章主要介绍了在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实现组件的扩展性介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue使用PDF.js实现浏览pdf文件功能
这篇文章主要为大家详细介绍了Vue如何使用PDF.js实现浏览pdf文件功能，文中的实现步骤讲解详细，具有一定的借鉴价值，需要的可以参考一下
2023-04-04
Vue 如何关掉响应式问题
这篇文章主要介绍了Vue 如何关掉响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue使用element-ui的el-date-picker设置样式无效的解决
本文主要介绍了vue使用element-ui的el-date-picker设置样式无效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
uni-app项目中引入Vant UI组件库完美避坑指南（纯净版）
网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下
2024-02-02
Vue 组件注册实例详解
这篇文章主要介绍了Vue 组件注册,结合实例形式较为详细的分析了vue.js组件的常见分类、注册方法及相关操作注意事项,需要的朋友可以参考下
2019-02-02
Vue使用NProgress进度条的方法
这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
Vue渲染流程步骤详解
在Vue里渲染一块内容，会有四个流程步骤，那么该怎么理解这个流程呢，所以本文就给大家详细讲解一下Vue 渲染流程，文中有纤细的代码示例供大家参考,需要的朋友可以参考下
2023-07-07
Vue 中 provide和inject的使用
这篇文章主要介绍了Vue中provide和inject的使用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
2022-08-08
Vue3中Vite和Vue-cli的特点与区别详解
vue-cli是Vue早期推出的一款脚手架,使用webpack创建Vue项目,可以选择安装需要的各种插件,比如Vuex、VueRouter,下面这篇文章主要给大家介绍了关于Vue3中Vite和Vue-cli的特点与区别的相关资料,需要的朋友可以参考下
2022-12-12
vue脚手架搭建过程图解
vue脚手架是个好东西，能够快速搭建vue单页面应用，vue是基于node环境的，所以要先安装node。下面通过图文并茂的形式给大家介绍vue脚手架搭建过程图解，感兴趣的朋友一起看看吧
2018-06-06