如何在 vue js 功能组件中设置类属性答案

【问题标题】：How to set class attribute on vuejs functional component如何在 vue js 功能组件中设置类属性
【发布时间】：2020-09-07 11:31:01
【问题描述】：

我有一个模仿 div 行为的 vuejs 功能组件。为此，我根据它收到的道具设置它的类。

类似这样的：

<MyDiv textAlign="left">Div with left aligned text</MyDiv>

变成：

<div class="text-left">Div with left aligned text</div>

但是，如果 MyDiv 组件是某个其他组件的根元素，例如：

Card.vue

<template>
  <MyDiv display="inline-block" textAlign="center">
    <slot />
  </MyDiv>
</template>

如果 Card 在使用时接收到任何类属性，我无法根据 MyDiv 道具设置类属性值，相反，类（在 MyDiv 上）被 Card 接收到的类覆盖。

所以这个：

<Card class="cool-style">Card content</Card>

变成：

<div class="cool-style">Card content</div>

蚂蚁不是这个（我需要的）：

<div class="cool-style inline-block text-center">Card content</div>

这是 MyDiv 组件：

MyDiv.vue

export default {
  name: 'my-div',
  functional: true,
  props: {
    textAlign: {
      type: String,
      allowed: ['left', 'right', 'center'],
      default: null
    },
    display: {
      type: String,
      allowed: ['hidden', 'block', 'inline-block', 'flex'],
      default: null
    }
  },
  render: function(createElement, context) {
    let classes = [];

    // Adds parent class to itself
    if (typeof context.data.staticClass == 'string') {
      classes.push(context.data.staticClass);
    }

    let classes = classes.concat([
      'my-div',
      context.props.textAlign && `text-${context.props.textAlign}`,
      context.props.display && context.props.display
    ]);

    classes = classes.filter(elm => elm != null);
    classes = classes.join(' ').trim();

    return createElement(
      props.type,
      {
        attrs: {
          class: classes
        }
      },
      context.children
    );
  }
};

TL;DR

当它的父级已经设置了一个类时，如何将我的自定义类强制为一个 vue 功能组件？

附带说明，可以使用有状态（非功能性和常规）组件来完成。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

替换

attrs: {
  class: classes
}

通过

class: classes

旁注：不需要将数组连接成字符串，您可以传递数组。

【讨论】：