Vue $attrs & inheritAttr实现button禁用效果案例


Posted in Vue.js onDecember 07, 2020

components/Button.vue

<template>
 <div>
  <button :disabled="$attrs.disabled">点击</button>
 </div>
</template>
 
<script>
 export default {
   inheritAttrs: false,
 }
</script>
 
<style scoped> 
</style>

App.vue

<template>
 <div id="app">
 <Parent></Parent>
 <Button disabled></Button>
 </div>
</template>

<script>
import Parent from './components/Parent'
import Button from './components/Button';
 
export default {
 name: 'App',
 components: {
 Parent,
 Button
 }
}
</script>
<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

效果截图1-inheritAttrs默认true:

Vue $attrs &amp; inheritAttr实现button禁用效果案例

效果截图2-inheritAttrs=false:

Vue $attrs &amp; inheritAttr实现button禁用效果案例

补充知识: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 $attrs &amp; inheritAttr实现button禁用效果案例

以上这篇Vue $attrs & inheritAttr实现button禁用效果案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 #Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 #Vue.js
You might like
PHP输出时间差函数代码
2013/01/28 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
降低PHP Redis内存占用
2017/03/23 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
关于this和self的使用说明
2010/08/01 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Python实现的批量下载RFC文档
2015/03/10 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
python三方库之requests的快速上手
2019/03/04 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python实现代码统计器
2019/09/19 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
什么是python的必选参数
2020/06/21 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
用python计算文件的MD5值
2020/12/23 Python
建筑工程专业毕业生自荐信
2013/10/19 职场文书
机电一体化毕业生求职信
2013/11/02 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
机器人瓦力观后感
2015/06/12 职场文书
小型婚礼主持词
2015/06/30 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记