Vue中组件的分类
## Vue中组件的分类：全局组件 局部组件
全局组件注册： Vue.component(‘组件名’,{template:’’})
局部组件注册： components(组件名,{template:""})
加粗样式
<div id='app'>
<!-- 调用全局组件 -->
<hello></hello>
</div>
<div id='app2'>
<hello></hello>
</div>
1-1在script中的操作
// 在Vue实例 中有很多的配置项，都可以在组件中使用了
// console.log(Vue.prototype)
// console.log(Vue.extend())//返回来的是一个Vue的组件（VueComponent） Vue 的子类
// console.log(Vue.extend().prototype)
// 1 全局创建组件 Vue.extend()
const key=Vue.extend({
template:`<h1>hello word</h1>`,
})
// 2 全局注册组件
Vue.component('hello',key)
var vm =new Vue({
el:'#app',//挂载点
data:{//数据
},
methods:{//方法
},
computed:{},//计算属性
watch:{},//观察
})
var vm=new Vue({
el:'#app2',
})
1-2可以利用上变简写的方法
全局组件
<div id='app'>
<msg></msg>
</div>
Vue.component('msg',{
template:'<div>msg的内容</div>'
})
var vm=new Vue({
el:'#app',
})
2-1局部组件
// 局部组件只能在当前的实例中使用，在components中注册
// 1 创建局部组件
const key=Vue.extend({
template:`<h1>hello word </h1>`
})
var vm=new Vue({
el:'#app',
components: {//局部组件的注册
hello:key
}
})
// var vm =new Vue({
// el:'#app2',
// components:{
// hello:key
// }
// })
</script>
2-2局部组件的简写
<div id="app1">
<ss></ss>
<sa></sa>
</div>
new Vue({
el:'#app1',
components:{//组件
ss:{
template:'<span>span元素</span>'
},
sa:{
template:'<h1>h1元素</h1>'
}
}
})