vue2 函数式组件

创建button.js文件

export default {
  functional: true,
  props: {
    type: {
      type: String,
      required: true
    },
  },
  render(h, context) {
    var type = context.props.type
    return <div class={type}>{type}</div>
  }
}

在父组件引入 import button from "./components/button.js 组件
注册函数组件

export default {
  components: {
     button
  }
}

在页面使用

<template>
    <button type="primary"></button>
    <button type="error"></button>
</template>

css 样式

.primary{color: green;}
.error{color: red;}