vue16——组件模板的分离写法

最新推荐文章于 2023-07-03 13:18:03 发布

8笔

最新推荐文章于 2023-07-03 13:18:03 发布

阅读量423

点赞数

CC 4.0 BY-SA版权

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103188141

vuejs 专栏收录该内容

57 篇文章

订阅专栏

本文深入解析Vue中组件的两种创建方式：使用<script>和<template>标签。详细介绍了如何通过type属性和id结合使用来定义组件模板，并展示了全局与局部注册组件的方法。

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

使用<script>标签 —— 不常使用
使用<template>标签

使用script标签 :

<script type="text/x-template" id="cpnC1">
    <div>
      <h2>组件cpn1</h2>
      <p>使用script标签，注意type属性值为 text/x-template; 结合id</p>
    </div>
</script>

//注册： 可全局，可局部
 Vue.component('cpn1', {
      template: '#cpnC1'
    });

使用template标签：

<template id="cpnC2">
    <div>
      <h2>组件cpn2</h2>
      <p>使用template标签，结合id</p>
    </div>
</template>
//注册： 可全局，可局部
	components: {
        cpn2: {
          template: '#cpnC2'
        }
      }