Vue怎么引入组建

在 Vue 中引入组件有两种方式：全局注册和局部注册。

1. 全局注册

全局注册组件可以在任何 Vue 实例的模板中使用。可以使用 Vue.component() 方法注册一个全局组件。

例如，我们有一个 Hello 组件：

<template>
  <div>
    <h1>Hello {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

然后我们可以在任何地方使用它，只需要在 Vue 实例中先注册一下：

import Vue from 'vue'
import Hello from './Hello.vue'

Vue.component('hello', Hello)

现在，我们就可以在任何 Vue 实例的模板中使用 `<hello>` 标签了。

2. 局部注册

局部注册组件只能在当前 Vue 实例的模板中使用。可以使用 components 选项注册一个局部组件。

例如，我们有一个 Hello 组件：

<template>
  <div>
    <h1>Hello {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

然后我们可以在当前 Vue 实例的 components 选项中注册一下：

<template>
  <div>
    <hello :name="name"></hello>
  </div>
</template>

<script>
import Hello from './Hello.vue'

export default {
  name: 'App',
  components: {
    Hello
  },
  data() {
    return {
      name: 'World'
    }
  }
}
</script>

现在，我们就可以在当前 Vue 实例的模板中使用 `<hello>` 标签了。