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


Posted in Vue.js onDecember 07, 2020

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实现组件的扩展性介绍

补充知识: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)

 },

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

2、inheritAttrs

默认值为true

默认情况子组件props未声明,父组件传输的其他属性会被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上(有可能会覆盖子组件根元素上的某些属性列如 type="text"之类属性)

子组件的inheritAttrs 设置为false可以避免

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

3、$listeners

父组件-子组件-孙子组件,现在我要你在孙子组件里改变父组件的值,子组件直接绑定

<muti-select v-bind="$attrs" v-on="$listeners" class="select"></muti-select>

以上这篇在vue中使用inheritAttrs实现组件的扩展性介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 #Vue.js
详解Vue中的自定义指令
Dec 07 #Vue.js
vue-router定义元信息meta操作
Dec 07 #Vue.js
Vue如何实现验证码输入交互
Dec 07 #Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 #Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
You might like
PHP clearstatcache()函数详解
2010/03/02 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
js同源策略详解
2015/05/21 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
浅谈python可视化包Bokeh
2018/02/07 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
毕业生自我鉴定
2013/12/04 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
辞职信标准格式
2015/02/27 职场文书
员工工作表现自我评价
2015/03/06 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
李强优秀员工观后感
2015/06/16 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS