Vue组件的几种声明方式：Vue.extend、语法糖、script的type=“text/x-template“、template标签

最新推荐文章于 2023-09-04 21:26:38 发布

每一天，每一步

最新推荐文章于 2023-09-04 21:26:38 发布

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u010234868/article/details/121315558

版权

Vue 专栏收录该内容

123 篇文章 2 订阅

订阅专栏

本文介绍了Vue.js中创建组件的四种方法：1) 使用Vue.extend构造器；2) 直接在Vue实例中定义局部组件；3) 利用script标签的type='text/x-template'创建组件模板；4) 使用template标签分离组件模板。每种方式都在Vue实例中注册并全局使用了组件。

摘要由CSDN通过智能技术生成

1、Vue.extend构造器写法

// 构造器 声明
const cpn2 = Vue.extend({
  template: `
    <h2>这是一个组件</h2>
  `
});

// vue实例中挂载注册为局部组件
components: {
  cpn2
}

// 全局组件
Vue.component('cpn2', cpn2);


// HTML代码中使用
<cpn2></cpn2>

2. 语法糖写法

// vue实例中挂载注册为局部组件
components: {
  cpn2: {
    template: `
      <h2>这是一个组件</h2>
    `
  }
}

// 全局组件
Vue.component('cpn2', {
  template: `
    <h2>这是一个组件</h2>
  `
});


// HTML代码中使用
<cpn2></cpn2>

3. script的type="text/x-template"，组件模板的抽离写法

<script type="text/x-template" id="cpn">
  <div>这是一个组件</div>
</script>

// vue实例中挂载注册为局部组件
components: {
  cpn: {
    template: '#cpn'
  }
}

// 全局组件
Vue.component('cpn', {
  template: '#cpn'
});


// HTML代码中使用
<cpn></cpn>

4. template标签，组件模板的抽离写法

<template id="cpn">
  <h2>这是一个组件</h2>
</template>

// vue实例中挂载注册为局部组件
components: {
  cpn: {
    template: '#cpn'
  }
}

// 全局组件
Vue.component('cpn', {
  template: '#cpn'
});


// HTML代码中使用
<cpn></cpn>