<aside> 💡 组件化Vue必须使用脚手架才能运行

</aside>

这是一个 Vue.js 的示例代码，演示了如何重用组件。主要包括两个文件：APP.vue 和 MyButton.vue。

APP.vue 文件中引入了 MyButton 组件，并在模板中使用了两次，分别传入了 size 和 color 属性作为参数。

MyButton.vue 是自定义的按钮组件，接受了 size 和 color 两个属性。在模板中使用了插槽 <slot></slot> 来渲染传入的内容。同时，根据传入的参数设置了按钮的样式。

通过这个示例，我们可以看到如何在 Vue.js 中定义和使用自定义组件，以及如何通过传递参数来改变组件的样式和行为。

APP.vue

<template>
  <div>
    <my-button size="small" color="red">Botton1</my-button>
    <my-button size="large" color="blue">Botton1</my-button>
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  components: {
    MyButton
  },
};
</script>

MyButton.vue

<template>
  <button :class="['btn', 'btn-' + size, 'btn-' + color]">
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: 'medium'
    },
    color: {
      type: String,
      default: 'blue'
    }
  }
};
</script>

<style>
.btn {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.btn-small {
  padding: 5px;
  font-size: 14px;
}

.btn-large {
  padding: 15px;
  font-size: 18px;
}

.btn-blue {
  background-color: blue;
  color: white;
}

.btn-red {
  background-color: red;
  color: white;
}
</style>