深入理解Vue.js组件！

组件

Vue.js引入的组件，让分解单一HTML到独立组件成为可能。组件可以自定义元素形式使用，或者使用原生元素但是以is特性做扩展。

注册和引用

使用组件之前，首先需要注册。可以注册为全局的或者是局部的。全局注册可以使用:

Vue.component(tag, options)

注册一个组件。tag为自定义元素的名字，options同为创建组件的选项。注册完成后，即可以形式引用此组件。如下是一个完整可运行的案例：

 src="https://unpkg.com/vue/dist/vue.js">
 id="app">
  

你也可以局部注册，这样注册的组件，仅仅限于执行注册的Vue实例内： src="https://unpkg.com/vue/dist/vue.js"> id="app">

我们注意到，是HTML本身并不具备的标签，现在由Vue的组件技术引入，因此被称为是自定义标签。这些自定义标签的背后实现常常是标签、脚本、css的集合体。它的内部可以非常复杂，但是对外则以大家习惯的简单的标签呈现。通过本节这个小小案例，组件技术带来的抽象价值已经展现出来一角了。

动态挂接

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。元素可以用于此场景，修改属性is即可达成动态切换的效果：

 v-bind:is="current">

假设我们有三个组件home、posts、archives，我们可以设置一个定时器，每隔2秒修改一次current，把三个组件的逐个切入到当前挂接点：

 src="https://unpkg.com/vue/dist/vue.js">
 id="app">
   v-bind:is="current">
  

引用组件

一个父组件内常常有多个子组件，有时候为了个别处理，需要在父组件代码内引用子组件实例。Vue.js可以通过指令v-ref设置组件的标识符，并在代码内通过$refs+标识符来引用特定组件。接下来举例说明。

假设一个案例有三个按钮。其中前两个按钮被点击时，每次对自己的计数器累加1；另外一个按钮可以取得前两个按钮的计数器值，并加总后设置{{total}}的值。此时在第三个按钮的事件代码中，就需要引用前两个按钮的实例。代码如下：

 src="https://unpkg.com/vue/dist/vue.js">
 id="app">
  {{ total }}
   ref="b1">
   ref="b2">
   v-on:click="value">value

标签button使用ref设置两个按钮分为为b1、b2，随后在父组件代码内通过$refs引用它们。

组件协作

按照组件分解的愿景，一个大型的HTML会按照语义划分为多个组件，那么组件之间必然存在协作的问题。Vue.js提供的协作方式有属性传递、事件传递和内容分发。

使用属性

此方法用于父组件传递数据给子组件。每个组件的作用域都是和其他组件隔离的，因此，子组件不应该直接访问父组件的数据，而是通过属性传递数据过来。如下案例传递一个字符串到子组件：

 src="https://unpkg.com/vue/dist/vue.js">
 id="app">
   message="hello">