组件化概念

遇到复杂问题如何解决

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

什么是组件化:

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

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>
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。