---

一、组件化开发思想

1、现实中的组件化思想体现

• 标准
• 分治
• 重用
• 组合

2、编程中的组件化思想体现

3、组件化规范: Web Components

• 我们希望尽可能多的重用代码
• 自定义组件的方式不太容易（html、css和js）
• 多次使用组件可能导致冲突

Web Components 通过创建封装好功能的定制元素解决上述问题

官网

Vue部分实现了上述规范

二、组件注册

1、全局组件注册语法

Vue.component(组件名称, {
	data: 组件数据,
	template: 组件模板内容
});

示例如下：

Vue.component("button-counter", {
	data: function () {
		return {
			count: 0
		};
	},
	template: '<button @click="count++">点击了{{count}}次</button>'
});

或者

Vue.component("button-counter", {
	data: function () {
		return {
			count: 0
		};
	},
	template: '<button @click="handle">点击了{{count}}次</button>',
	methods: {
		handle: function () {
			this.count += 2;
		}
	}
});

2、组件语法

<div id="app">
	<button-counter></button-counter>
</div>

<div id="app">
	<button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
</div>

3、组件注册注意事项

• data必须是一个函数
• 组件模板内容必须是单个跟元素
• 组件模板内容可以是模板字符串
  • 模板字符串需要浏览器提供支持（ES6语法）
• 组件命名方式 ---- 短横线方式

Vue.component("button-counter", {});

• 组件命名方式----驼峰方式

Vue.component("HelloWorld", {});

4、局部组件注册

var ComponentA = {
	/* ... */
};
var ComponentB = {
	/* ... */
};
var ComponentC = {
	/* ... */
};
new Vue({
	el: "#app",
	components: {
		"component-a": ComponentA,
		"component-b": ComponentB,
		"component-c": ComponentC
	}
});

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！