VueJS 扩展组件进行自定义

Question

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

示例：

<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 定义所有 @ 并以相同的方式发出它们，但是有什么简单的方法可以做到吗？

Answer 1

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

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

我不确定什么最适合你的情况。

VueJS 扩展组件进行自定义

VueJS extend component for customization

components

vue.js