Question

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

我希望在组件是特定卡组件的兄弟（不一定是直接孩子）时为组件分配特定的css类。

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

建议的方法是什么？

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

Answer 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>`
});

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

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

Vue：以不同的方式渲染组件，具体取决于父组件

1 个答案: