056_末晨曦Vue技术_处理边界情况之X-template-优快云博客

本文链接：https://blog.youkuaiyun.com/LS_952754/article/details/126508273

"本文介绍了Vue.js中利用`<script type="text/x-template">`定义模板的方法，这种定义方式适用于大型模板或小型应用，但通常不推荐，因为它将模板与组件定义分离。示例代码展示了如何在HTML中创建一个名为'hello-world-template'的模板，并在Vue组件中引用它。文章强调了模板应当与组件定义保持在一起的原则。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

处理边界情况之X-template

点击打开视频讲解更加详细

另一个定义模板的方式是在一个<script>元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。例如：

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

x-template 需要定义在 Vue 所属的 DOM 元素外。

这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。

完整案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>末晨曦吖</title>
</head>
<body>
    <div id="app">
        <hello-world></hello-world>
        <script type="text/x-template" id="hello-world-template">
            <p>Hello hello hello</p>
        </script>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('hello-world', {
            template: '#hello-world-template'
        })
        var app = new Vue({
            el:'#app'
        })
    </script>
</body>
<style scoped>
    body{
        padding: 0;
        margin: 0;
    }
</style>
</html>