Vue----局部组件与全局组件

局部组件：局部组件的使用前提是：在根组件App.vue中导入，声明，引用后才能使用，不导入，则不能使用。

全局组件：在入口函数main.js中声明该组件为全局组件后，在任意子组件中可直接使用该全局组件，不用再经历导入--->声明--->引用的流程了。

示例：

vue2中定义全局组件：

import Vue from 'vue'
import TkBadge from './components/TkBadge'
import App from './App.vue'

Vue.component('TkBadge', TkBadge) // 全局注册 - 我们可以在任何地方使用

new Vue({
  render: h => h(App)
}).$mount('#app')

vue3中定义全局组件：

import { createApp } from 'vue'

import App from './App.vue'

// 定义全局组件 1.main.js中导入该组件
import greeting from "@/components/greeting";
// 定义全局组件 2.创建app
const app = createApp(App)
// 定义全局组件 3.创建全局组件
app.component("greeting",greeting)

app.mount('#app')

效果：

在根组件App.vue中不导入greeting组件，也不声明，直接通过在<template></template>标签中引用该全局组件即可