vue中component组件使用——模块化开发和全局组件

1、模块化开发组件：

box1.vue文件如下：

<template>
  <div class="hello">
    <h1>测试</h1>
  </div>
</template>

<script>
export default {

}
</script>

box2.vue文件如下：import引入box1.vue，components设置，然后设置成标签使用<box1><template>

  <div>
    <box1></box1>
  </div>
</template>

<script>
import box1 from '@/components/box1'
export default {
  components: {'box1': box1},
}
</script>

2、全局组建

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

　　渲染为：

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