Vue-组件开发
<div id="app">
<!--引用组件时，组件名必须采用横线分隔符-->
<component-a></component-a>
<component-a></component-a>
<component-b></component-b>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局注册组件
/*
组件名
1、驼峰、黄线分隔符命名方式
2、使用组件时，必须采用横线分隔符方式进行引用
组件可以理解为就是特殊的Vue实例，不需要手动的实例化而已，它用于管理自己的模板
* */
Vue.component('component-a',{
/*template选项指定组件的模板代码*/
template:'<div><h1>头部组件</h1></div>',
/*在组件中，data选项必须是一个函数*/
data:function(){
return{
name:'全局组件'
}
}
})
var vm = new Vue({
el:'#app',
data: {
message:'uniapp'
},
methods:{
}
});
const ComponentB ={
template:'<div>这是{{ name }}</div>',
data:function(){
return {
name:'局部组件'
}
}
}
new Vue({
el:'#app',
// 组件选项
components:{
// key ：value key组件名,value 就是组件对象
'component-b':ComponentB
}
})
</script>