[Vue.js] 扩充元件（Component）

以 ElementUI 的 Button 为例

这是 ElementUI 的 Button

预设没有提供这样的样式

该如何做到呢？

建立一个新元件，命名为 ElButtonFull.vue

ElButtonFull.vue

<template>    <el-button class="el-button-full" v-bind="$props">        <slot></slot>    </el-button></template><script>import { Button } from 'element-ui'export default {    name: 'ElButtonFull',    extends: Button};</script><style scoped>.el-button-full {    width: 100%;}</style>

透过设定 extends: Button，ElButtonFull 就会继承 Button 的 props 等所有属性

在 <el-button> 中加上 v-bind="$props" 后，在 <el-button-full> 设定的 prop 会同步更新到子层 <el-button> 的 prop，就不需要手动对应每一个 prop 啦。

App.vue

<template>    ...    <el-button-full type="primary">Button</el-button-full>    ...</template><script>import ElButtonFull from 'components/ElButtonFull.vue'export default {    ...    components: {        ElButtonFull,        ...    }    ...}</script>