Vue 本地组件

到目前为止，我们包含组件的方式使它们可以从项目中的所有 *.vue 文件中访问。

组件可以本地化，这意味着它们只能在特定的 *.vue 文件中访问。

全局组件

到目前为止，我们在 main.js 中包含组件的方式使这些组件可以在该项目中所有其他 *.vue 文件的 <template> 中访问。

实例

我们在 CompOne.vue 和 App.vue 中都使用了 CompTwo.vue 组件，以表明在当前的 main.js 设置中，组件可以相互访问。

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')

本地组件

我们可以在 *.vue 文件的 <script> 标记中直接包含一个组件，而不是将其包含 main.js 中。

如果我们在 *.vue 文件中直接包含一个组件，那么该组件只能在该文件中本地访问。

实例

为了使 CompOne.vue 成为 App.vue 的本地组件，并且只能在那里访问，我们将其从 main.js 中删除。

main.js:

import { createApp } from 'vue'
import App from './App.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-two', CompTwo)
app.mount('#app')

并将 CompOne.vue 直接包含在 App.vue 的 <script> 标记中。

App.vue:

<template>
  <h3>Local Component</h3>
  <p>The CompOne.vue component is a local component and can only be used inside App.vue.</p>
  <comp-one />
  <comp-two />
</template>
<script>
  import CompOne from './components/CompOne.vue';
  export default {
    components: {
      'comp-one': CompOne
    }
  }
</script>

CompOne.vue 组件现在仅在 App.vue 中可用。

如果您在开发模式下运行应用程序，并尝试从 CompOne.vue 内部使用 CompTwo.vue，则会收到警告：