vue — 组件基础

什么是组件

组件（Component）是对数据和方法的简单封装。web中的组件其实能够当作是页面的一个组成部分，它是一个具备独立的逻辑和功能的界面，同时又能根据规定的接口规则进行相互融和，最终成为一个完整的应用，
页面就是由一个个相似这样的组成部分组成的，好比导航、列表、弹窗、下拉菜单等。页面只不过是这样组件的容器，组件自由组合造成功能完整的界面，当不须要某个组件，或者想要替换某个组件时，能够随时进行替换和删除，而不影响整个应用的运行。、前端组件化的核心思想就是将一个巨大复杂的东西拆分红粒度合理的小东西。

使用提升开发效率、方便重复使用、简化调试步骤、提高整个项目的可维护性、便于协同开发。

vue做为一个轻量级前端框架，其核心就是组件化开发。
组件能够扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些状况下，组件也能够表现为用 is 特性进行了扩展的原生 HTML 元素。

vue中，组件是可复用的 Vue 实例。由于组件是可复用的 Vue 实例，因此它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件注册

全局注册

经过 Vue.component 来建立组件：

Vue.component('my-component-name', {
  // ... 选项 ...
    })

这些组件是全局注册的。也就是说它们在注册以后能够用在任何新建立的 Vue 根实例 (new Vue) 的模板中。好比：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })


<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

在全部子组件中也是如此，也就是说这三个组件在各自内部也均可以相互使用。

局部注册

全局注册每每是不够理想的。好比，若是你使用一个像 webpack 这样的构建系统，全局注册全部的组件意味着即使你已经再也不使用一个组件了，它仍然会被包含在你最终的构建结果中。这形成了用户下载的 JavaScript 的无谓的增长。

在这些状况下，你能够经过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

而后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每一个属性来讲，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用。例如，若是你但愿 ComponentA 在 ComponentB 中可用，则你须要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

使用Babel和webpack中的注册组件

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

注意在 ES2015+ 中，在对象中放一个相似 ComponentA 的变量名实际上是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称
包含了这个组件选项的变量名

基础组件的自动化全局注册

没看懂。

data 必须是一个函数

data: {
  count: 0
}

这样定义的data中的变量是全局变量，在使用组件时，在一个组件中修改变量的值，会影响到全部组件中该变量的值。为避免变量干扰，一个组件的 data 选项必须是一个函数，所以每一个实例能够维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

动态组件

在不一样组件之间进行动态切换是很是有用的，好比在一个多标签的界面里：

上述内容能够经过 Vue 的 <component> 元素加一个特殊的 is 特性来实现：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

你会注意到，若是你选择了一篇文章，切换到 Archive 标签，而后再切换回 Posts，是不会继续展现你以前选择的文章的。这是由于你每次切换新标签的时候，Vue 都建立了一个新的 currentTabComponent 实例。

从新建立动态组件的行为一般是很是有用的，可是在这个案例中，咱们更但愿那些标签的组件实例可以被在它们第一次被建立的时候缓存下来。为了解决这个问题，咱们能够用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

能够在这里查看动态组件例子。动态组件实例

dom标签内使用组件

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素能够出如今其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出如今其它某些特定的元素内部。

这会致使咱们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被做为无效的内容提高到外部，并致使最终渲染结果出错。幸亏这个特殊的 is 特性给了咱们一个变通的办法：

<table>
  <tr is="blog-post-row"></tr>
</table>