使用组件

在Vue中，可以用 Vue.extend() 创建一个组件构造器：

var MyComponent = Vue.extend({
  template:'..........' //选项
})

要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：

// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)

在注册之后，组件便可以用在父实例的模块中，以自定义元素 < my-component > 的形式使用。要确保在初始化根实例之前注册了组件：

<div id="example">
  <my-component></my-component>
</div>

js代码如下：

// 定义
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
  el: '#example'
})

渲染为：

<div id="example">
  <div>A custom component!</div>
</div>