Vue组件化详解：创建、注册与使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44154577/article/details/117376148

Vue组件化

组件化是Vue.js中的重要思想
- 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用
- 任何的应用都会被抽象成一颗组件树
组件的使用分成三个步骤
- 创建组件构造器
- 注册组件
- 使用组件
1.Vue.extend()：
- 调用Vue.extend()创建的是一个组件构造器
- 传入template代表我们自定义组件的模板
2.Vue.component()：
- 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
- 需要传递两个参数：1、注册组件的标签名 2、组件构造器
3.组件必须挂载在某个Vue实例下，否则它不会生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<div id="app"> 
	<!--使用组件-->
	<div>
	<cpn1></cpn1>
	<div>
	</div>
	<body>
		<script>
			//创建组件
			const cpnC = Vue.extend({
				template:`
				<p>山东菏泽曹县,牛皮666,我的宝贝</p>
				`
			})
			
			//注册组件
			Vue.component('cpn1',cpnC)
			const app =new Vue({
				el:"#app",
				data:{	
				}
			})
		</script>
	</body>
</html>

当我们用Vue.component()来注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用

当我们需要这个组件只在它特定的vue实例中起到作用的话就要用到局部组件，其实就是创建组件的位置发生了一些变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<div id="app"> 
	<cpn1></cpn1>
	<cpn2></cpn2>
	</div>
	————————————————————————分割线
	<div id="app2">
		<cpn1></cpn1>
		<cpn2></cpn2>
	</div>
	<body>
		<script>
			//创建组件
			const Mycomponent1 = Vue.extend({
				template:`
				<p>山东菏泽曹县,牛皮666,我的宝贝</p>
				`
			})
			const Mycomponent2 = Vue.extend({
				template:`
				<p>耶斯莫拉</p>
				`
			})
			//注册组件
			const app =new Vue({
				el:"#app",
				components:{
					'cpn1':Mycomponent1
				}
			})
			
			const app2 =new Vue({
				el:"#app2",
				components:{
					'cpn2':Mycomponent2
				}
			})
		</script>
	</body>
</html>