组件化概念

遇到复杂问题如何解决

当遇到一个复杂的问题，可以拆分成多个易于处理的小问题，处理后再将其放在整体中，那么复杂的大问题也会迎刃而解。

什么是组件化：

组件化就是将一个页面拆分成一个个小的功能模块，每个功能模块完成属于自己这部分独立的功能，使得整个页面的管理和维护变得非常容易。

Vue组件化思想

• 组件化是Vue中的重要思想

它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。组件树。

• 组件化思想的应用
  1.在项目中充分利用组件化的思想
  2.尽可能的将也页面拆分成一个个小的可复用的组件
  3.好处：代码更加方便组织和管理，扩展性也更强

注册组件的基本步骤

组件的使用分成三个步骤

• 创建组件构造器

  调用Vue.extend()方法创建组件构造器
  const cpnC = Vue.extend({
    template: `
        <div>
          <h2>我是标题</h2>
          <p>我是内容</p>
        </div>`
  })
  

注：在这里使用了"~"来包含字符串，能够换行

• 注册组件

  调用Vue.cimponent()方法注册组件
  Vue.component('my-cpn',cpnC)
  

• 使用组件

  在Vue实例的作用范围内使用组件
  <div id="app">
    <my-cpn></my-cpn>
  </div>