1 前言

我们前面讲到了如何去简单的使用组件，而这节课我们将讲解，引用组件的两种方式，局部引用和全局引用。

我们首先创建一个页面，然后分别用两种方式引用。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
const message = 'Welcome World!';
</script>

文件位置如下，然后我们在HomeView.vue文件里面引用。

2 局部引用

局部引用通过import方法引入文件，示例如下，

<template>
  <div>
    <WelcomeWorld />
  </div>
</template>

<script setup>
import WelcomeWorld from './WelcomeWorld.vue';
</script>

效果如下，

3 全局引用

全局引用，是指在一个主页面引用后，可以在所有子页面使用。

可以避免每次都写引用，规范写法如下，

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 全局注册一个组件
app.component('my-component', {
  // 组件的选项
});

app.mount('#app');

然后我们看一下如何全局引用WelcomWorld，

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import WelcomeWorld from './views/WelcomeWorld.vue';

const app = createApp(App);
app.component('welcome-world', WelcomeWorld);
app.use(store).use(router).mount('#app');

然后HomeView页面可以直接写标签引用，可以不用引用。

<template>
  <div>
    <welcome-world />
  </div>
</template>

结果如下，