全局组件：通过vue直接注册的。
const myTitle = Vue.extend({template:""});局部组件：通过vue实例创建的组件（components），只有这个实例里可以用
let app = new Vue({el: '#app',components: {"my-footer": myFooter,}});我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3. 使用组件-->
<my-title></my-title>
<my-footer></my-footer>
</div>
<hr>
<div id="app2">
<!--全局组件，其他vue实例也可以调用-->
<my-title></my-title>
<my-footer>app的局部组件不显示</my-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.创建组件构造器
const myTitle = Vue.extend({
template: `
<div>
<span>Title</span>
<span>User</span>
</div>`
});
//1.创建组件构造器
const myFooter = Vue.extend({
template: `
<div>
<span>Footer</span>
</div>`
});
//2. 注册组件,通过Vue直接创建的组件及为全局组件，每个vue实例都可以用
//局部组件：通过vue实例创建的组件（components），只有这个实例可以用
Vue.component('my-title',myTitle);
let app = new Vue({
el: '#app',
//局部组件
components: {
"my-footer": myFooter,
}
});
let app2 = new Vue({
el: '#app2',
});
</script>
</body>
</html>
我是分割线
前台效果：
Title app的局部组件不显示