Class 作为功能组件中的功能 - Vue

Question

我正在用 vuejs 编写一个简单的功能组件。目前停留在我想根据传递给它的道具添加条件 css class 的情况。

然而，下面的内容并没有像预期的那样工作，我想知道我在这里做错了什么。

<script>
export default {
  name: "BasePill",

  functional: true,

  props: {
    variant: String
  },

  render(createElement, { children, props }) {

    const componentData = {
      staticClass: "text-sm text-center"
      class: function() {
        if (props.variant === 'secondary') {
           return 'bg-secondary'
        }

        return 'bg-primary'
      }
    };

    return createElement("span", componentData, children);
  },
};
</script>

Answer 1

class属性不能是函数，必须是string/array/object.

改为这样做：

const componentData = {
  staticClass: 'text-sm text-center',
  class: props.variant === 'secondary' ? 'bg-secondary' : 'bg-primary',
};

Class 作为功能组件中的功能 - Vue

Class as function in functional component - Vue

javascript

vue.js

vue-component

vuejs2