VueJS 扩展组件进行自定义答案

【问题标题】：VueJS extend component for customizationVueJS 扩展组件进行自定义
【发布时间】：2021-08-21 19:31:24
【问题描述】：

有什么方法可以使用一些通用组件并保留它的道具发射器等并自定义它吗？

例子：

<template>
   <GenericComponent color="black">
     Something in the default slot
  </GenericComponent>
</template>
<script>
import GenericComponent  from 'GenericComponent'
export default {
  name: 'MyCustomizedComponent'

  props: // to take same props as GenericComponent and pass it to GenericCompnent?
  // and it emits all events from GenericComponent
 // I could probably just copy props and pass it directly to GenericComponent, but what if there 
 // is many 
}
</script>
<style scoped>
//some changes to Generic component
<style>

所以我可以创建道具，并从 GenericComponent 定义所有 @ 并以相同的方式发出它们，但是有什么简单的方法吗？

【问题讨论】：

是的，你可以使用 mixins vuejs.org/v2/guide/mixins.html

标签： vue.js components

【解决方案1】：

您可以使用 mixins，跨多个组件重用代码。

您还可以为原始组件创建一个包装器组件，进行自定义，并使用v-bind="$props" 将所有道具传播到原始组件，并使用v-on="$listeners" 将所有事件从原始组件发送到父组件。

我不确定哪种方法最适合您的情况。

【讨论】：