Vue：根据父组件以不同方式渲染组件答案

【问题标题】：Vue: Render component differently, depending on parent componentsVue：根据父组件以不同方式渲染组件
【发布时间】：2018-04-30 14:56:57
【问题描述】：

我的应用中有多种卡片变体。每张卡片都包含常见的子组件（文本块、头像、图像）

当一个组件是特定卡片组件的兄弟（不一定是直接子级）时，我想将特定的 css 类分配给它。

或者当组件在特定卡片中呈现时添加一些 html 包装器元素。

实现此目的的推荐方法是什么？

或者必须为每种卡片变体创建不同的组件？

【问题讨论】：

我能想到：将样式应用为道具？并添加一个容器（你已经提到过）
这真的取决于你希望它们有多不同。如果您可以简单地使用 CSS 类对样式差异进行硬编码，只需将 class="..." 添加到您的组件中即可。否则，您可能需要考虑为您的组件使用 mixins。
是的，拥有一个容器父组件来“协调”子组件是要走的路
请不要这样做。共享状态应该在存储中。 Vue 组件不应该知道或关心它们的兄弟姐妹。将您的状态放入商店。
@bbsimonbb 我可以举个例子吗？

标签： vuejs2

【解决方案1】：

所以我相信你有一个卡片组件，它有一些共同的组件，这些组件在不同的情况下需要看起来不同。

例如，让我假设这些卡片将包含用户详细信息，即他们的头像图像、可以编辑的他/她的姓名等。现在这些卡片对于男性和女性来说应该看起来不同

方法 1 - 添加类：

Vue.component('my-card', {
    props: {
      cardType: String,
    },
    data: function(){
      return {
        menCardClasses: {
            input: {'some-class': true}
        },
        womenCardClasses: {
            input: {'other-class': true}
        },
        inputClasses: {}
      }
    },
    computed: {
      if(this.cardType == 'men'){
        this.inputClasses = this.menCardClasses.input;
      }
    },
    template: `<div class='card'><input :class="inputClasses"></div>`
});

在这种方法中，您的卡片组件将处理状态和子组件获取的类

方法 2 - 包装组件：

Vue.component('my-card', {
    props: {
      cardType: String,
    },
    data: function(){

    },
    computed: {

    },
    template: `<div class='card'>
                <men-card-component v-if="cardType=='men'"></men-card-component>
                <women-card-component v-else></women-card-component>
               </div>`
});

Vue.component('men-card-component', {
    template: `<div class='men-card'><input /></div>`
});

Vue.component('women-card-component', {
    template: `<div class='women-card'><input /></div>`
});

在这种方法中，卡片组件只是一个包装器，它将根据状态呈现另一个组件。

您可以选择适合您并让您感觉舒适的方法。

【讨论】：