Vue3中全局组件和局部组件示例

在 Vue 3 中，全局组件和局部组件的注册方式略有不同。下面是一个示例，展示了如何在 Vue 3 中注册全局组件和局部组件：

<template>
  <div>
    <global-component />
    <local-component />
  </div>
</template>

<script>
import { createApp, defineComponent } from 'vue';

// 全局组件
const GlobalComponent = defineComponent({
  // 组件配置选项
});

// 局部组件
const LocalComponent = defineComponent({
  // 组件配置选项
});

const app = createApp({
  components: {
    GlobalComponent,
    LocalComponent,
  },
});

app.mount('#app');
</script>

在上面的示例中，我们首先使用 `defineComponent` 函数定义了一个全局组件 `GlobalComponent` 和一个局部组件 `LocalComponent`。你可以在各个组件的配置选项中定义组件的数据、生命周期钩子、计算属性、方法等。

然后，我们使用 `createApp` 函数创建了一个应用实例，并通过 `components` 选项将 `GlobalComponent` 和 `LocalComponent` 注册为全局组件。

最后，我们通过 `app.mount('#app')` 将应用实例挂载到指定的 DOM 元素上。

这样，在模板中就可以使用 `<global-component />` 和 `<local-component />` 标签来引用注册的全局和局部组件了。

希望这个示例能够帮助你理解 Vue 3 中全局组件和局部组件的注册方式！