时间戳

首页 > 解决方案 > VueJS 如何使用 x-templates 创建功能组件？

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

问题描述

我想创建一个带有模板作为单文件组件的 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 做同样的事情？

标签： javascripthtmlvue.js

解决方案

从文档：

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

推荐阅读