doina

一个小菜鸟运维工程师.

vue 组件化开发

[toc]

什么是组件化

组件是可复用的 Vue 实例,且带有一个名字.

组件化思想

组件化是Vue.js中的重要思想
– 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
– 任何的应用都会被抽象成一颗组件树。

有了组件化的思想,在之后的开发中就要充分的利用它
– 尽可能的将页面拆分成一个个小的、可复用的组件。
– 这样让我们的代码更加方便组织和管理,并且扩展性也更强。

组件的组织: 通常一个应用会以一棵嵌套的组件树的形式来组织

《vue 组件化开发》

可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。

注册组件步骤解析

  • 组件的使用分成三个步骤:
    • 创建组件构造器: Vue.extend()
    • 注册组件: Vue.component()
    • 使用组件。
  • 1.Vue.extend():
    • 调用Vue.extend()创建的是一个组件构造器。
    • 通常在创建组件构造器时,传入template代表我们自定义组件的模板。
    • 该模板就是在使用到组件的地方,要显示的HTML代码。
    • 事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接使用下面我们会讲到的语法糖,但是在很多资料还是会提到这种方式,而且这种方式是学习后面方式的基础。
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>`
  })

  • 2.Vue.component():
    • 调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
    • 所以需要传递两个参数:1、注册组件的标签名 2、组件构造器
  // 2.注册组件
  Vue.component('my-cpn', cpnC)
  • 3.组件必须挂载在某个Vue实例下,否则它不会生效。(见下图)
    • 我们来看下面我使用了三次
    • 而第三次其实并没有生效:
<div id="app">
  <!--3.使用组件-->

  <my-cpn></my-cpn>
  <div>
    <my-cpn></my-cpn>
  <div>
</div>
<my-cpn></my-cpn>

全局组件和局部组件

  • 当我们通过调用Vue.component()注册组件时,组件的注册是全局的,这意味着该组件可以在任意Vue示例下使用。
Vue.component('cpn', cpnC)
  • 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      // cpn使用组件时的标签名
      cpn: cpnC
    }
  })

父组件和子组件

  • 组件和组件之间存在层级关系
  • 而其中一种非常重要的关系就是父子组件的关系

模板分离

  • Vue提供了两种方案来定义HTML模块内容:
    • 使用

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据