vue2 extends 函数式组件

在Vue2中，可以使用extends关键字来扩展函数式组件。函数式组件是一种特殊类型的组件，它没有状态（data）和实例（this），只接收props作为输入，并返回渲染结果。

通过extends关键字，我们可以创建一个新的函数式组件，并继承原始函数式组件的特性和功能。这样可以方便地对函数式组件进行扩展和定制。

下面是一个示例代码，展示了如何使用extends来扩展函数式组件：

// 原始的函数式组件
const OriginalFunctionalComponent = {
  functional: true,
  props: {
    message: String
  },
  render(h, context) {
    return h('div', `Original Component: ${context.props.message}`);
  }
};

// 扩展的函数式组件
const ExtendedFunctionalComponent = {
  extends: OriginalFunctionalComponent,
  render(h, context) {
    return h('div', [
      h('p', 'This is an extended component.'),
      h(OriginalFunctionalComponent, context.data, context.children)
    ]);
  }
};

在上面的代码中，OriginalFunctionalComponent是原始的函数式组件，它接收一个message属性并将其显示在页面上。ExtendedFunctionalComponent通过extends关键字继承了OriginalFunctionalComponent，并在原始组件的基础上添加了一些额外的内容。

通过这种方式，我们可以在不改变原始函数式组件的情况下，对其进行扩展和定制，以满足特定的需求。