javascript - 克隆单个文件 Vue 组件(模板和功能)

Question

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

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

理想情况下，我希望能够创建一个新的 Vue 组件，它导入整个模板以及方法、 Prop 等。我研究过使用 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>