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 18 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
Vue router配置与使用分析讲解
Dec 24 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+SqlServer实现分页显示
2006/10/09 PHP
php 远程关机操作的代码
2008/12/05 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP URL路由类实例
2013/11/12 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
2010/07/26 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
vue axios用法教程详解
2017/07/23 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
wxPython 入门教程
2008/10/07 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
工程业务员岗位职责
2013/12/31 职场文书