全局组件和局部组件
全局组件的定义的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>全局组件</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
</div>
<script type="text/javascript">
// 创建组件构造器
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容：小奶虎</p>
</div>
`
})
//注册组件(全局组件：意味着可以在多个Vue的实例下面使用)
Vue.component('cpn',cpnC);
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>
局部组件的定义的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>局部组件</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
</div>
<script type="text/javascript">
// 创建组件构造器
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容：小奶虎</p>
</div>
`
})
//注册组件(全局组件：意味着可以在多个Vue的实例下面使用)
// Vue.component('cpn',cpnC);
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
},
components:{
//cpn：使用组件时的标签名
//此时注册的是局部组件
cpn:cpnC
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>
![[附源码]Python计算机毕业设计Django疫情网课管理系统](https://img-blog.csdnimg.cn/f6acbf77028e4469a443516d34e8f943.png)
![[附源码]JAVA毕业设计体育用品购物系统（系统+LW）](https://img-blog.csdnimg.cn/54dfaf2e9d384752bb5b06b8f930db0a.png)
![[附源码]Python计算机毕业设计Django智慧园区运营管理系统](https://img-blog.csdnimg.cn/bc19cb81ed9f4793b506d2cdea231444.png)
