组件就是定义html中不存在的标签
一、全局定义组件
<div id="app">
<h1>{{msg}}</h1>
<zujian></zujian>
</div>
<script>
Vue.component('zujian',{
template:`<h2>全局组件</h2>`
});
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld"
}
})
</script>
即使定义全局的组件，也要放在vue的作用域内才管用。
二、局部组件（在构造器里面定义）
<script>
Vue.component('zujian',{
template:`<h2>全局组件</h2>`
});
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld"
},
components:{
"com1":{
template:`<h2>局部组件</h2>`
}
}
})
</script>
image.png
局部组件要在定义组件的作用域里进行使用，其他作用域使用无效。
<div id="app">
<h1>{{msg}}</h1>
<zujian></zujian>
<com1></com1>
</div>
<div class="app">
<com1></com1>
</div>
<script>
Vue.component('zujian',{
template:`<h2>全局组件</h2>`
});
var app=new Vue({
el:"#app",
data:{
msg:"HelloWorld"
}
})
var app1=new Vue({
el:'.app',
components:{
"com1":{
template:`<h2>局部组件1</h2>`
}
}
})
在#app作用域内使用com1无效
image.png
三、指令和组件的区别
指令：指令是绑定在标签上的属性
组件：定义的是标签，组件里面可以定义属性
