零基础学习Vue: 第32课 Vue全局组件的定义方法：
定义全局组件：
Vue.component('aaa',{ //aaa主件名
template:'<div>首页aaa</div>' //主件标签样式
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 引入组件 -->
<div>以下是全局组件</div>
<aaa></aaa>
<bbb></bbb>
<div>以下是局部组件</div>
<ccc></ccc>
<ddd></ddd>
</div>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//下面是定义 全局组件
Vue.component('aaa',{
template:'<div>首页aaa</div>'
});
Vue.component('bbb',{
template:'<div>首页bbb</div>'
});
//下面是定义 局部组件
let ccc = {
template:'<div>首页ccc</div>'
}
let ddd = {
template:'<div>首页ddd</div>'
}
//根组件
let vm = new Vue({
el:'#app',
components:{ //局部组件需要在根组件中注册 全局组件不用
ccc,
ddd
}
})
</script>
</body>
</html>
运行结果如下：
