Vue 全局组件

全局注册的组件可以在其他组件内直接使用，它在整个Vue实例中都是全局有效的。

非单文件组件中使用

Vue.component('student-list', {
  template: `
    <div>
      <ul>
        <li v-for="(student, index) in students" :key="index">
            学生姓名：{{student.name}}
        </li>
      </ul>
    </div>
  `
})

Vue.component('teacher-list', {
  template: `
    <div>
      <ul>
        <li v-for="(teacher, index) in teachers" :key="index">
            老师姓名：{{teacher.name}}
        </li>
      </ul>
      <!-- student-list组件用在teacher-list组件中 -->
      <student-list></student-list>
    </div>
  `
})

单文件组件中使用

在单文件组件中全局注册组件的方式有些不同，在main.js中引入组件，并使用Vue.component('name', var)进行全局注册

import movieList from '@/components/movie-list/movie-list.vue'

Vue.component('movie-list', movieList)

注册完成之后，在其他组件中，无需再导入，直接可以使用。