如何重构模板变体和共享方法

Question

我们有几种不同的呈现帖子的方式（例如，整页，模态视图，折叠视图，编辑模式等）。许多方法在它们之间共享。我们将所有这些变体保留为Post.vue中的模板，并传递上下文prop以使用v-if有条件地呈现某个变量：

<single-post
  :post="currPost"
  :canEditPost="canEditPost"
  :targetPageUrl="targetPageUrl"
  :mailToLink="mailToLink"
  :onAddComment="addComment"
  :onDeleteComment="deleteComment"
  :onShowMoreComments="showMoreComments"
  :onShowFewerComments="showFewerComments"
  :onGoToPost="goToPost"
  v-if="context === 'feed'"
/>

<post-full
  :post="currPost"
  :canEditPost="canEditPost"
  :targetPageUrl="targetPageUrl"
  :mailToLink="mailToLink"
  :postImage="postImage"
  :units="units"
  :divisionsByType="divisionsByType"
  v-if="context === 'permalink'"
/>

(many more versions)

然后在Post.vue有像这样的方法：

deletePost: function(){
  BootBox.confirm("Are you sure you want to delete this post?", (confirmed) => {
    if (confirmed) {
      API.deletePost(this.currPost, (err) => {
        if (!err){
          this.currPost.status = 'deleted';
        }
      });
    }
  });
},

我怎样才能重构这个更优雅，更简洁？

对我而言，这似乎超级冗长（太多道具）。我一直在寻找vue或vuex模式。

Answer 1

我认为v-bind是你的朋友，<component>，PostModel

创建一个PostModel，它预定义了可重用帖子的所有功能和属性：

export default {
    post: {},
    canEditPost: function() {},
    targetPageUrl: '',
    //...
}

然后导入你的SinglePost（或任何你需要的）和PostModel

import SinglePost from '/path/to/SinglePost';
import PostModel from './path/to/PostModel';

export default {

    data() {
        return {
            thePostComponent: SinglePost,
            postProps: Object.assign({}, PostModel, {
                post: post,
                canEditPost: canEditPost,
                targetPageUrl: targetPageUrl
            }
        }
    }
}

上面的想法是，您使用给定帖子的任何自定义配置覆盖对象，但您不需要在组件上自行定义属性，从而创建更自包含且可重用的组件。如果您从API中传递这些属性，则可以通过使用Interceptor模式将模型映射到API，甚至可以更轻松地将其集成以使其更加平坦和可重用。

最后，动态显示该组件：

For a reusable component:

<component :is="thePostComponent" v-bind="postProps">

希望这会有所帮助