在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与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
如何去掉文章里的 html 语法
2006/10/09 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python数据结构之图的实现方法
2015/07/08 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python实现三次样条插值
2018/12/17 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
质量负责人任命书
2014/06/06 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python