Vue.js 组件创建的三种方式详解

使用 Vue.extend 创建组件

第一种方法是利用 Vue.extend 来构建一个全局可用的 Vue 组件。

//1.1 使用vue.extend创建组件
var com1 = Vue.extend({
  //通过template属性指定组件要展示的html结构 
  template : "<h3>使用vue.extend创建的组件</h3>"  
})
//1.2使用Vue.component('组件名称',创建出来的组件模板对象)
Vue.component('myCom1',com1)

在 HTML 页面中，通过自定义标签的形式引入该组件，例如 <my-com1></my-com1>。

需要注意的是，组件名称若采用驼峰命名法，在 HTML 标签中使用时必须转换为小写，并用连字符连接各部分（因为 HTML 标签不区分大小写且不允许大写）。如果组件名本身不含大写字母，则直接引用名称即可。

第二种方法是直接使用 Vue.component 来创建组件。

在以上基础上，可直接将 com1 的内容写入 Vue.component。

Vue.component('com2',{

　　template : "<h3>这是直接Vue.component创建的组件</h3>"

})

在页面中依然通过自定义标签的方式引用该组件。

无论采用上述哪种方式创建组件，其 template 属性定义的内容中必须且只能包含一个根元素。

第三种方法是使用独立的 template 标签来定义组件模板。

Vue.component("com3",{
  template : '#temp1' 
})

在 Vue 实例控制的 #app 区域之外，使用 <template> 元素来定义组件的 HTML 结构。

<template id="temp1">
  <div>
    <h1>好用，有代码提示快捷键</h1>
  </div>
</template>

在页面中，同样通过自定义标签的形式来引用和使用该组件。

以上介绍了 Vue 组件创建的几种常见方式，希望对学习 Vue 的朋友有所帮助，欢迎继续支持本站。