Vue的热加载API只适用于.vue文件。在你的例子中使用第一种语法。所有的Vue组件（功能或其他）都应该在.vue文件中，以最大限度地兼容像热加载这样的开发工具。
如果需要，您甚至可以使用功能模板：

<template functional>
  <div>
    <component :is="`h${props.level}`">Header {{ props.level }}</component>
  </div>
</template>

<script>
export default {
functional: true,
props: {
level: { type: Number, default: 1 }
}
}
</script>

你好，@sirlancelot，我在使用vue@2.6.12和bootstrap-vue@2.21.2的应用程序中遇到了类似的问题。代码的目的是将<b-table>组件的行为从不允许选择更改为允许选择，这取决于该页面上其他地方的模式状态的更改。

const conditionalTable = {
  functional: true,
  props: {
    selectMode: {type: String, required: true}
  },
  render(createElement, {children, data, props}){
    const {attrs} = data;
    if (props.selectMode === 'Selected'){
      console.log("selectMode", selectMode);
      return createElement("b-table", data, children);
    }
    else {
      console.log("selectMode", selectMode);
      return createElement("b-table",
        {
          ...data,
          attrs: {
            ...attrs,
            'no-select-on-click':"" // <--- prevents rows from being selected
          }
        },
        children
      );
    }
  }
}

使用调用的组件

<conditional-table
        striped
        hover
        selectable
        :select-mode="currentWriteOp"
        @row-selected="onRowSelected"
        selected-variant="warning"
        hover-variant="primary"
        responsibve="sm"
        :items="diff"
        :fields="computedFields()">
        <--! <logic for data being rendered/> -->
   </conditional-table>

我将变量currentWriteOp（位于此页面的数据函数中）更改为值Selected，调用了condition-table函数，并且我看到类更改为通过Firefox 96.0上的开发工具删除no-select-on-click，但当我单击它们时，我看不到它们的颜色变化（a la selected-variant="warning"），这意味着它们没有被选中。