一、全局化注冊(cè)組件
在javascript里注冊(cè)了一個(gè)組件，在HTML中調(diào)用了他。這就是最簡(jiǎn)單的一個(gè)組件的編寫方法，并且它可以放到多個(gè)構(gòu)造器的作用域里。
<!DOCTYPE html>
<html>
<head>
<title>Component 初識(shí)組件</title>
</head>
<body>
<div id='app'>
<baidu></baidu>
</div><hr>
<div id="app2">
<baidu></baidu>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
//全局注冊(cè)組件，可以放在多個(gè)構(gòu)造器里
Vue.component('baidu',{
template:`
<a >百度</a>
`
})
var app=new Vue({
el:'#app',
data:{
}
})
var app=new Vue({
el:'#app2',
data:{
}
})
</script>
</body>
</html>
二、局部注冊(cè)組件
局部注冊(cè)組件和全局注冊(cè)組件是相對(duì)應(yīng)的，局部注冊(cè)的組件只能在組件注冊(cè)的作用域里進(jìn)行使用，其他作用域使用無效。
<!DOCTYPE html>
<html>
<head>
<title>Component 初識(shí)組件</title>
</head>
<body>
<div id='app'>
<baidu></baidu>
</div><hr>
<div id="app2">
<!-- 不可以使用 -->
<baidu></baidu>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
},
components:{
// 局部注冊(cè)的baidu組件，只能在當(dāng)前作用域中使用
'baidu':{
template:`
<a >百度</a>
`
}
}
})
var app=new Vue({
el:'#app2',
data:{
}
})
</script>
</body>
</html>
三、組件和指令的區(qū)別
組件注冊(cè)的是一個(gè)標(biāo)簽，而指令注冊(cè)的是已有標(biāo)簽里的一個(gè)屬性
