在 VUE 中，哪种共享模板和逻辑的方法更受欢迎？

Question

我有两个不相关的上下文组件，它们共享逻辑和模板的方式看起来像是一个在扩展另一个。

想象一下像这样放置和拾取组件：

// pick.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Pick extends Vue {
  template: '<p>{{name}}</p>',
  created() {
    console.log('Hello Pick');
  }
  data: { 
    name: 'pick',
    count: 0
  },
  methods: {
    add: function () {
      this.count++;
    }
  }
}

// drop.js
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class Drop extends Vue {
  template: '<p>{{name}}</p> <span v-if="isUserFriendly">Greetings!!!</span>',
  created() {
    console.log('Hello Drop');
  }
  data: { 
    name: 'drop',
    isUserFriendly: false,
    count: 0,
    drops: 0
  },
  methods: {
    add: function () {
      this.count++;
      this.drops++;
    },
    remove: function () {
      this.count--;
    },
  }
}

直觉上，可以说 Drop 在扩展 Pick 的同时添加了一些功能并更改了模板。这似乎是一个很好的解决方案，但后来我心想，要实现该 Pick 模板应该如下所示：

<p>{{name}}</p> 
<span v-if="isUserFriendly">Greetings!!!</span>

还记得我说过 不相关的上下文 组件吗？现在 Pick 需要了解 isUserFriendly，这是不可接受的，我也不认为这是正确的解决方案。此外，它会在未来产生开销，因为继承很难维护（想象更多的组件要扩展和逻辑要共享）。

您认为这里最好的方法是什么？也许还有另一种我不熟悉的方法？

感谢您的帮助！

Answer 1

组件组合是执行此操作的常用方法。 Drop 组件包含功能的超集，即 pick 组件应该允许以允许所需输出和行为的方式包装。

对于父子关系，数据片作为 props 和事件传递，视图片作为槽传递。

附加逻辑保留在父组件中。

在子组件 (Pick) 中：

<div>
  <p>{{name}}</p>
  <slot name="extraText"/>
</div>

和

add: function () {
  this.count++;
  this.$emit('add');
}

在父组件中（Drop）：

<Pick @add="drops++">
  <template v-slot:extraText>
    <span>Greetings!!!</span>
  </template>
</Pick>

在 VUE 中，哪种共享模板和逻辑的方法更受欢迎？

Which approach of sharing template and logic is preferred in VUE?

inheritance

typescript

vue.js

vue-component

vuejs2