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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python3模块smtplib实现发送邮件功能
2018/05/22 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
名人演讲稿范文
2013/12/28 职场文书
自我鉴定书
2014/03/24 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
单位委托函范文
2015/01/29 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫