克隆单个文件 Vue 组件（模板和功能）

Question

我目前有一个 Vue 组件，我在我的应用程序的一部分中使用它。我想在我的应用程序的另一部分使用相同的组件；但是，我想对 CSS 做一些小的改动（改变背景颜色等）。

简单但重复的方法是简单地将组件复制并粘贴到一个新的 .vue 文件中，并进行相应的 CSS 更改；但是，有没有更好的方法来实现这种效果？

理想情况下，我希望能够创建一个新的 Vue 组件，它可以导入整个模板以及方法、道具等。我已经研究过使用 extends;但是，它不会导入 Vue 模板 - 只是功能。

Answer 1

您可以将 css 类名作为 props 传递：

Vue.component('my-component', {
  template: '#my-component',
  props: ['styled']
})

new Vue({
  el: '#app',
})

body {
  font-family: "Montserrat"
}

.card {
  border-radius: 8px;
  margin: 20px;
  padding: 30px 40px;
}

.first-component {
  background-color: #FFBF88;
  font-size: 16px;
  font-weight: bold;
}
.second-component {
  background-color: #C4E0F1;
  font-size: 12px;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<div id="app">
  <my-component styled="first-component"></my-component>
  <my-component styled="second-component"></my-component>
</div>



<template id="my-component">
  <div class="card" :class="styled">
      I'm the same component
  </div>
</template>