Vue中使用组件

Vue使用组件分为三步：

1、在html中使用要自定义的组件，比如

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

2、将该组件进行注册

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

3、创建根实例

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

最终的渲染结果就变成了

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

局部注册方式

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})