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

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:

效果截图2-inheritAttrs=false:

补充知识：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 & inheritAttr实现button禁用效果案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue根据条件不同显示不同按钮的操作

    我就废话不多说了,大家还是直接看代码吧~ <template slot-scope="scope"> <el-button v-if="scope.row.isDeleted === 0" @click="lowerShelf(scope.row.id)" size="mini" type="primary" plain>下架</el-button> <el-but

  • Vue v2.4中新增的$attrs及$listeners属性使用教程

    Vue v2.4中新增的$attrs及$listeners属性使用教程

    前言 多级组件嵌套需要传递数据时,通常使用的方法是通过vuex.如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点杀鸡用牛刀.Vue 2.4 版本提供了另一种方法,使用 v-bind="$attrs", 将父组件中不被认为 props特性绑定的属性传入子组件中,通常配合 interitAttrs 选项一起使用.之所以要提到这两个属性,是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁,业务清晰. 首先分析以下应用场景: A 组件与 B

  • Vue动态控制input的disabled属性的方法

    Vue动态控制input的disabled属性的方法

    有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页

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

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

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

  • vue 使用async写数字动态加载效果案例

    父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv

  • Android 通过自定义view实现水波纹效果案例详解

    Android 通过自定义view实现水波纹效果案例详解

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 标准正余弦水波纹: 非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余

  • AngularJS2中一种button切换效果的实现方法（二）

    AngularJS2中一种button切换效果的实现方法（二）

    之前用三目表达式和ng-class实现了按钮切换效果,似乎达到了我的预期,但是我觉得还有改进空间,网上找了一些资料,大概还有以下几种实现方式: 路由 <button class="btn1" routerLink="component1" routerLinkActive="active" type="submit">btn1</button> <button class="btn2&q

  • BootStrap的JS插件之轮播效果案例详解

    BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class

  • JavaScript仿微博输入框效果(案例分析)

    JavaScript仿微博输入框效果(案例分析)

    这篇文章给大家分享一个小的JavaScript的案例,就是模仿微博输入框的效果. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿微博输入框效果</title> <script src="jquery.js"></script> </h

  • vue 中基于html5 drag drap的拖放效果案例分析

    事情是这样的,右边有各种控件,可以拖动到右边自由区,在自由区内可以随意拖动. 案例一: 开始的我,so easy! 通过绑定元素的mousedown 事件,监听鼠标的mousemove,和mouseup 事件,于是我轻松实现了同一区域内元素可以拖着跑,上代码! move (e) { let odiv = e.target // 获取目标元素 // 算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft let disY = e.clientY - o

  • Nuxt的路由动画效果案例

    路由的动画效果,也叫作页面的更换效果.Nuxt.js提动两种方法为路由提动动画效果,一种是全局的,一种是针对单独页面制作. 全局路由动画 全局动画默认使用page进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的assets/css下建立一个main.css文件. /assets/css/main.css .page-enter-active,.page-leave-active{ transition: opacity 2s; } .page-ente

  • CSS3使用过度动画和缓动效果案例讲解

    CSS3使用过度动画和缓动效果案例讲解

    transition过渡: 四个小属性 属性 意义 transition-property 哪些属性要过渡 transition-duration 动画时间 transition-timing-function 动画变化曲线(缓动效果) transition-delay 延迟时间 transition过度属性是CSS3浓墨重彩的特性,过度可以为一个元素在不同样式之间变化自动添加"补间动画" 兼容性IE10开始兼容,移动端兼容良好 曾几何时,网页上的动画特效基本都是由JavaScript

  • Vue3.0 自己实现放大镜效果案例讲解

    Vue3.0 自己实现放大镜效果案例讲解

    需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏.  css中的cursor https://www.runoob.com/cssref/pr-class-cursor.html  鼠标跟随效果如何实现: (子绝父相)绝对定位 +  修改top,left控制移动  在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>H

随机推荐