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

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

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {props: ['title'],data: function () {return {count: 0}},template: '<button v-on:click="count++">You clicked me {{ count }} {{ title }}times.</button>'
})

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

在input上使用 v-model

<inputv-bind:value="searchText"v-on:input="searchText = $event.target.value"
>

在组件上使用 v-model

<custom-inputv-bind:value="searchText"v-on:input="searchText = $event"
></custom-input>Vue.component('custom-input', {props: ['value'],template: `<inputv-bind:value="value"v-on:input="$emit('input', $event.target.value)">`
})

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：
通过 Vue 的 元素加一个特殊的 is attribute 来实现：

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

<template><div><component v-bind:is="currentTabComponent"></component><button @click="changeTab('ComponentA')">Component A</button><button @click="changeTab('ComponentB')">Component B</button><button @click="changeTab('ComponentC')">Component C</button></div>
</template>
<script>import ComponentA from './ComponentA.vue';import ComponentB from './ComponentB.vue';import ComponentC from './ComponentC.vue';export default {components: {ComponentA,ComponentB,ComponentC},data() {return {currentTabComponent: 'ComponentA'}},methods: {changeTab(component) {this.currentTabComponent = component;}}}
</script>