什么是组件化？

人如何处理复杂问题：任何人处理信息的逻辑能力都是有限的，所以当面对一个非常复杂的问题时，我们不太可能一次性处理一大堆内容。然而，我们有一种天生的分解问题的能力。如果你把一个复杂的问题分解成许多可管理的小问题，把它们放入整体，你会发现大问题就迎刃而解了。组件化也是类似的思路：如果我们把一个页面中所有的处理逻辑放在一起，处理起来会变得非常复杂，也不利于后续的管理和扩展。但是如果我们把一个页面分成小的功能块，每个功能块完成自己独立的功能，那么整个页面的管理和维护就会变得非常容易。

Vue组件化思想

组件化是Vue.js中的一个重要思想，它提供了一种抽象，允许我们开发独立的和可重用的小组件来构建我们的应用程序。任何应用程序都将被抽象成一个组件树。组件思想的应用：有了组件思想，就要在以后的开发中充分利用。尽可能将页面分成小的、可重用的组件。这使得我们的代码更便于组织和管理，也更具可扩展性。所以组件是Vue发展过程中非常重要的一章，要认真学习。

注册组件的基本步骤

组件的使用分为三步：创建一个组件构建器来注册组件以使用组件。让我们看看如何通过代码注册组件来查看运行结果。好像和直接用div没什么区别。但是我们可以想象一下，如果这样的信息要在很多地方展示，我们可以直接用它来完成吗？DOCTYPEhtmlhtmllang=' en ' headmetacharset=' UTF-8 ' title document/title/headbydivid=' app '-3.使用组件-my-CPN/my-CPN/divideptsrc='/js/vue.js'/scriptscript//1。创建组件构建器对象constcpnc=vue . extend({ template 3360 ` div H2我是标题/h2p我是内容，哈哈哈哈哈哈哈哈哈哈。呵呵呵呵呵呵呵呵呵呵呵呵/p/div`})//2。注册组件Vue.component('my-cpn 'cpnC)；Constapp=newvue ({el:' # app 'data : { message : ' Hello ' } })/script/body/html

注册组件步骤解析

这里的步骤是什么意思？1.Vue.extend():调用Vue.extend()创建一个组件构造函数。通常在创建组件构造函数时，传入的模板代表我们自定义组件的模板。该模板是在使用组件的地方显示的HTML代码。其实这种写法在Vue2.x的文档中几乎看不到，会直接用到我们下面要讲的语法糖，但在很多资料中还是会提到，而且这种写法是学习后一种写法的基础。2.Vue.component():调用Vue.component()就是将刚才的组件构造函数注册为一个组件，并给它一个组件的标签名。所以你需要传递两个参数，1，注册组件2的标签名，组件构造器3。组件必须安装在Vue实例下，否则不会生效。再来看下面：我用了三次，第三次实际上没有生效。

全局组件和局部组件

当我们通过调用Vue.component()来注册一个组件时，组件的注册是全局的，也就是说组件可以用在任何Vue例子中。如果注册的组件安装在实例中，则它是本地组件全局组件：

！doctypehtmllang=' headmetacharset=' utf-8 ' title cunt/title/head body divided=' app '-三使用组件-CPN/CPN pn/CPN/div id=' app 2 ' CPN/CPN/div script src='-什么/js/view。js '/script script//1 '创建组件构造器对象constcpnc=视图。扩展{ template : ' divh 2我是标题页：1我是内容，哈哈哈哈哈哈哈哈哈/pp我是内容，呵呵呵呵呵呵呵呵呵/p/div(})//2注册组件（全局组件，意味着可以在多个视图(视图)的实力下面使用)观点。组件(' CPN 'cpnc)；//怎么才能注册局部组件康斯特布尔PP=newview({ El 3330 ' # app '数据3330 {消息3330 })你好}，})constable PP 2=new view({ El 3330 ' # app2 'data 3330 { message 3330 })你好})/脚本/正文/html局部组件：

！doctypehtmllang=' headmetacharset=' utf-8 ' title cunt/title/head body divided=' app '-三使用组件-CPN/CPN pn/CPN/div id=' app 2 ' CPN/CPN/div script src='-什么/js/view。js '/script script//1 '创建组件构造器对象constcpnc=视图。扩展{ template : ' divh 2我是标题页：1我是内容，哈哈哈哈哈哈哈哈哈/pp我是内容，呵呵呵呵呵呵呵呵呵/p/div(})//2注册组件（全局组件，意味着可以在多个视图(视图)的实力下面使用)//查看。组件(' CPN 'cpnc)；//怎么才能注册局部组件康斯特布尔PP=newview({ El 3330 ' # app '数据3330 {消息3330 })你好' },组件：{//cpn使用组件时的标签名称CPN 3330 cpnc } })constable PP 2=new view({ El 3330 ' # app2 'data 3330 { message 3330 })你好})/脚本/正文/html