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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-克隆单个文件Vue组件(模板和功能)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1076字，纯文字阅读大概需要2分钟。

内容图文

目前,我在应用程序的一部分中使用了Vue组件.我想在应用程序的另一部分中使用相同的组件；但是,我想对CSS进行一些小的更改(更改背景颜色等).

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

理想情况下,我希望能够创建一个新的Vue组件,该组件可以导入整个模板以及方法,道具等.但是,它不会导入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组件(模板和功能)全部内容，希望文章能够帮你解决javascript-克隆单个文件Vue组件(模板和功能)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---