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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 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实现从远程下载文件的方法
2015/03/12 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
vue的全局提示框组件实例代码
2018/02/26 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
python抓取网页图片示例(python爬虫)
2014/04/27 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python将数组n等分的实例
2019/12/02 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
代办委托书怎样写
2014/04/08 职场文书
个人委托书范本
2014/09/13 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
同乡会致辞
2015/07/30 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL