vue全局组件和局部组件

Vue全局组件和局部组件的定义

全局组件

方法一:

<div id="app">
	<com-com></com-com>
</div>

 const temp = Vue.extend({
	template:`<h1>hello</h1>`
 })
 Vue.component('comCom',temp);
 const vm = new Vue({
	el:"#app"
 })

方法二：

<div id="app">
	<com-com></com-com>
</div>

Vue.component('comCom',Vue.extend({
	template:`<h1>hello</h1>`
}))
const vm = new Vue({
	el:"#app"
})

方法三：

<div id="app">
	<com-com></com-com>
</div>

Vue.component('comCom',{
    template:'<h1>hello</h1>'
})
const vm = new Vue({
	el:"#app"
})

方法四：

<div id="app">
	<com-com></com-com>
</div>
<template id="fefe">
   <div>
       <h1>hello </h1>
       <span>vue</span>
   </div>       
</template>

 Vue.component('comCom',{
     template:'#fefe'
 })
 const vm = new Vue({}
 	el:"#app",
 	data:{},
 )

局部组件

方法一：

<div id="app">
	<com-com></com-com>
</div>

const vm = new Vue({
	el:"#app",
	data:{},
	components:{
		comCom:{
			template:`<h1>hello</h1>`
		}
	}
})

方法二：

<div id="app">
	<com-com></com-com>
</div>

const temp = {
	template:`<h1>hello</h1>`
}
const vm = new Vue({
	el:"#app",
	data:{},
	components:{
		comCom:temp
	}
})

方法三：

<div id="app">
	<com-com></com-com>
</div>
<template id="temp">
	<h1>hello</h1>
</template>

const vm = new Vue({
	el:"#app",
	data:{},
	components:{
		comCom:{
			template:"#temp"
		}
	}
})

注意：当定义的组件采用驼峰式命名时，在使用它时要改成以‘-’连接的形式；如果没有采用驼峰式的命名方法则可以直接使用名称组件