Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例

更新時間：2020年12月07日 09:13:27 作者：書院二層樓

這篇文章主要介紹了Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

components/Button.vue

<template>
 <div>
  <button :disabled="$attrs.disabled">點(diǎn)擊</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默認(rèn)true:

效果截圖2-inheritAttrs=false:

補(bǔ)充知識：vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性

1、首先我們創(chuàng)建一個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自定義繼承，當(dāng)前組件的根就是inputCom-wrap
  setup () {
    return {}
  }
})
</script>
 
<style scoped> 
</style>

2、使用組件的時候，隨便增加一些屬性，如

<inputCom type="text" class="input-a"></inputCom>

<inputCom type="password" class="input-b"></inputCom>

3、查看最終的渲染結(jié)果為(與props不會沖突)

以上這篇Vue $attrs & inheritAttr實(shí)現(xiàn)button禁用效果案例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE的history模式下除了index外其他路由404報(bào)錯解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報(bào)錯解決辦法，對此有需要的朋友們可以學(xué)習(xí)下。
2019-08-08
Vue?export?default中的name屬性有哪些作用
這篇文章主要介紹了Vue?export?default中的name屬性有哪些作用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue 獲取數(shù)組鍵名的方法
本篇文章主要介紹了Vue 獲取數(shù)組鍵名的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06
關(guān)于表單組件el-form中的prop的作用
這篇文章主要介紹了關(guān)于表單組件el-form中的prop的作用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
Vue中使用vue-plugin-hiprint插件進(jìn)行打印的功能實(shí)現(xiàn)
hiprint 是一個web 打印的js組件,無需安裝軟件,支持windows,macOS,linux 系統(tǒng),支持移動端,PC端瀏覽器,angular,vue,react 等分頁預(yù)覽,打印,操作簡單,運(yùn)行快速,本文介紹了Vue中使用vue-plugin-hiprint插件進(jìn)行打印,需要的朋友可以參考下
2025-04-04
利用Vue+ElementUi實(shí)現(xiàn)評論功能
這篇文章主要介紹了如何利用Vue+ElementUi實(shí)現(xiàn)評論功能,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2024-04-04
Vue中import與@import的區(qū)別及使用場景說明
這篇文章主要介紹了Vue中import與@import的區(qū)別及使用場景說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣
這篇文章主要介紹了vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-10-10
vue中的事件修飾符介紹和示例
在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理,需要的朋友可以參考下
2023-04-04
Vue前端實(shí)現(xiàn)導(dǎo)出頁面為word的兩種方法
這篇文章主要介紹了Vue前端實(shí)現(xiàn)導(dǎo)出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-12-12