我目前有一个 Vue 组件,我在我的应用程序的一部分中使用它。我想在我的应用程序的另一部分使用相同的组件;但是,我想对 CSS 做一些小改动(更改背景颜色等)。
简单但重复的方法是简单地将组件复制并粘贴到一个新的 .vue 文件中,并进行相应的 CSS 更改;但是,是否有更好的方法来实现这种效果?
理想情况下,我希望能够创建一个新的 Vue 组件,它导入整个模板以及方法、 Prop 等。我研究过使用 extends ;但是,它不导入 Vue 模板 - 仅导入功能。
最佳答案
你可以传递一个 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>
关于javascript - 克隆单个文件 Vue 组件(模板和功能),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50189802/