vue js调用组件

在Vue.js中调用组件有几种方式：

1. 全局注册：在Vue实例化之前，通过Vue.component()方法全局注册组件。然后在模板中使用组件的标签名来调用。

// 全局注册组件
Vue.component('my-component', {
  // 组件选项
})

// 在模板中使用组件
<my-component></my-component>

2. 局部注册：在Vue实例中的components选项中局部注册组件。然后在该Vue实例的模板中使用组件的标签名来调用。

// 局部注册组件
const MyComponent = {
  // 组件选项
}

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
})

// 在模板中使用组件
<my-component></my-component>

3. 动态组件：通过Vue的<component>标签和is特性来动态切换不同的组件。

<component :is="componentName"></component>

其中，componentName是一个变量，可以根据需要动态改变。

4. 异步组件：通过Vue的异步组件实现按需加载。可以使用Vue的异步组件工厂函数（通过import()或require.ensure()）或webpack的动态import()来实现。

const MyComponent = () => import('./MyComponent.vue')

// 在模板中使用异步组件
<my-component></my-component>

注意，异步组件会在第一次使用时自动加载并缓存，以后再次使用时会直接使用缓存的组件。

这些是Vue.js中调用组件的几种常见方式，你可以根据具体情况选择合适的方式来调用组件。