Vue组件——自定义全局组件

Vue两大核心：
1.数据驱动界面改变
2.组件化
什么是组件？什么是组件化？
在前端开发中组件就是把一个很大的界面拆分成多个小的界面，每一个小的界面就是一个组件
将大界面拆分成小界面就是组件化
组件化的好处
1.可以简化Vue实例的代码
2.可以提高复用性
如何创建组件（三步）

• 创建组件构造器

<script>
	let Profile = Vue.extend({ 
		template : `
			<img src = "images/1.jpg">
			<p>描述信息</p>
			`
	}); 
</script>

• 注册已经创建好的组件

//第一个参数：指定注册的组件的名称
//第二个参数：传入已经创建好的组件构造器
<script>
	let Profile = Vue.extend({ 
		template : `
			<img src = "images/1.jpg">
			<p>描述信息</p>
			`
	}); 
	Vue.component("abc",Profile);
</script>

• 使用注册好的组件

<div id = "app">
	<abc></abc>
</div>

<script>
	let Profile = Vue.extend({ 
		template : `
			<img src = "images/1.jpg">
			<p>描述信息</p>
			`
	}); 
	Vue.component("abc",Profile);
</script>

打开浏览器后发现只有img元素显示出来，p元素内容没有显示出来。这里是因为：在创建组件指定组件的模板的时候，模板只能有一个根元素。所以我们就把所有的内容放进一个div里。

<div id = "app">
	<abc></abc>
</div>

<script>
	let Profile = Vue.extend({ 
		template : `
			<img src = "images/1.jpg">
			<p>描述信息</p>
			`
	}); 
	Vue.component("abc",Profile);
</script>

以上自定义全局组件的方法可以使用，但是在编写template的时候没有提示，不利于编写，我们就来看一下简化版的方法
首先编写组件的模板

<template id = "info">
	<div>
		<img src = "images/1.jpg">
		<p>描述信息</p>
	</div>
</template>

<script>
	Vue.component("abc",{
		template : "#info"
	});
</script>

然后再直接注册这个组件，给这个组件起一个名称，然后在对象里面告诉它这个组件对应的模板的id，这样就完事了。