一、直接通过Vue.extend的方式创建组件
// 通过vue.extend 来创建全局组件 var com1 = Vue.extend({ template:'<h3>这是h3组件</h3>>' }) // 通过Vue.component("组件名称","Vue.extend创建出来的模板对象") Vue.component("mycom",com1)
在new Vue()对象中引用mycom组件对象
<div id="app"> <div>
<mycom></mycom> </div> </div>
二、直接通过Vue.component来创建组件
1、在body中定义html模板
<template id="temp1"> <div> <h2>temp1</h2> <h2>temp1</h2> </div> </template>
2、在js中定义Vue.component的,template为body中定义html模板的id,也可以直接在template参数中直接写入html
Vue.component("mycont",{ template:"#temp1" })
3、在new Vue()对象中引用m定义组件即可