在Vue里使用$attrs & inheritAttr实现button禁用效果

在Vue里使用$attrs & inheritAttr实现button禁用效果，直接上DEMO代码。

<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>

JS

<script>
import Parent from './components/Parent'
import Button from './components/Button';
  
export default {
 name: 'App',
 components: {
 Parent,
 Button
 }
}
</script>

css

<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>