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>

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

1 个答案: