VUE首选哪种共享模板和逻辑的方法？

Question

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

想象一下这样的 Drop 和 Pick 组件：

// 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 组件应该允许以允许所需输出和行为的方式进行包装。

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

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

在子组件中（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>