VueJS 如何使用 x-templates 创建功能组件？答案

【问题标题】：VueJS how do you create a functional component using x-templates?VueJS 如何使用 x-templates 创建功能组件？
【发布时间】：2020-04-24 18:07:51
【问题描述】：

我想创建一个带有模板的vueJS功能组件作为单文件组件。我正在使用 x 模板，因此我的组件将位于 .html 文件中。

例如，如何将下面的组件变成功能组件？

<!-- my_component.html -->
<script type="text/x-template" id="my-component-template">
    <div>
        blah blah blah
    </div>
</script>

<script>
    Vue.component('my-component', {
        delimiters: ['[[', ']]'],
        template: '#my-component-template',
        props: {},
    })
</script>

如果我使用 .vue 文件，我只能找到如何执行此操作的示例，在这种情况下，您将使用 <template functional>。你如何对 x-templates 做同样的事情？

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

来自the docs：

Vue.component('my-component', {
  functional: true,
})

【讨论】：

当我添加 functional: true, 时，我得到“TypeError: Cannot read property 'call' of undefined”
不知道，听起来和功能组件无关。