一. 全局组件:在任何一个vue实例里面都可以使用
Vue.component("global-cmp", global_cpnc);
二. 局部组件:只在声明的vue实例里面起作用
const app03 = new Vue({
el: "#app03",
components: {
local_cmp: local_cpnc
}
});
三. 组件实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app01">
<global-cmp></global-cmp>
</div>
<div id="app02">
<global-cmp></global-cmp>
<!-- 局部组件在此不生效 -->
<local_cmp></local_cmp>
</div>
<div id="app03">
<global-cmp></global-cmp>
<local_cmp></local_cmp>
</div>
</body>
<script type="application/javascript" src="js/vue.js"></script>
<script>
const global_cpnc = Vue.extend({
template:
`<div>
<h2>我是标题</h2>
<p>全局组件</p>
<div>`
});
const local_cpnc = Vue.extend({
template:
`<div>
<h2>我是标题</h2>
<p>局部组件</p>
<div>`
});
Vue.component("global-cmp", global_cpnc);
const app01 = new Vue({
el: "#app01"
});
const app02 = new Vue({
el: "#app02"
});
const app03 = new Vue({
el: "#app03",
components: {
local_cmp: local_cpnc
}
});
</script>
</html>
四. 截图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/056eece74f0cd0d5a510224ae9414ff4.png)